내마음대로만들어보자326 mousemove() 메서드 mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌푯값을 각각 에 출력하는 예제를 통해 알아보자. mousemove X : 0px Y : 0px 2021. 8. 23. mouseeter() / mouseleave()메서드 mouseeter() 이벤트 메서드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킨다. mouseleave() 이벤트 메서드는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킨다. 참고로, mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하고, mouseenter는 이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트다. 마찬가지로, mouseout은 대상 요소에서 마우스 포인터가 벗어나면 발생하는 이벤트고 mouseleave는 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 이벤트다. * 예제 mouseout 내용1 내용2 내용3 mouseleave 내용4 내용5 내용6 2021. 8. 23. [공식문서]엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위라고 보면된다. 엘리먼트는 화면에 표시할 내용을 기술한다. const element = hello, world; 엘리먼트는 컴포넌트의 구성요소이므로 둘을 헷갈리면 안된다! 이 안에 들어가 있는 모든 엘리먼트를 React DOM에서 관리하기 떄문에 이것을 루트(root) DOM 노드라고 부르고, React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면된다. 예시로 실시간으로 시간이 변경되는 내용에 대해 알아보자. function tick() { const element = ( hello, world It is {new Date().toLocaleTimeString()} ); ReactDOM.render(element, .. 2021. 8. 23. [공식 문서] JSX 소개 1. JSX문법 변수 선언방식 const element = Hello, world!; JSX는 자바스크립트를 확장한 문법이며, JSX는 React의 엘리먼트를 생성한다. 2. JSX란? 리액트에서는 렌더링 로직이 (이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터를 준비하는 방식 등)과 연결된다. 3. JSX에 표현식 포함하기 아래 예시에서 name이라는 변수를 선언한 후 중괄호로 감싸 JSX안에 사용해보자. const name = 'kang'; const element = hello {name} ReactDOM.render ( element, document.getElementById('root') ); JSX 중괄호 안에는 유효한 모든 자바스크립트 표현식을 .. 2021. 8. 23. 이전 1 ··· 36 37 38 39 40 41 42 ··· 82 다음
