1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
1. React에서 canvas 사용하기 캔버스는 DOM을 조작해야 하므로 useRef(), useEffect()를 사용해야 함. 한편, 캔버스는 React에서 재렌더링이 되지 않아도 화면에 그림이 나타나므로 캔버스와 관련된 변수는 특별한 경우가 아닌 한 State로 관리할 필요가 없음. export default function Drawing() { const canvas = useRef(null); return ; } useRef()를 이용해 요소를 선택하고, canvas 객체에 요소가 제대로 담기는 시점(Drawing 컴포넌트 렌더링이 완료되는 시점 이후)에 컨텍스트를 생성할 수 있음. export default function Drawing() { const canvas = useRef(null)..
1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..
JavaScript/React 2022. 9. 2. 16:08
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
JavaScript/React 2022. 7. 22. 21:18
1. React에서 canvas 사용하기 캔버스는 DOM을 조작해야 하므로 useRef(), useEffect()를 사용해야 함. 한편, 캔버스는 React에서 재렌더링이 되지 않아도 화면에 그림이 나타나므로 캔버스와 관련된 변수는 특별한 경우가 아닌 한 State로 관리할 필요가 없음. export default function Drawing() { const canvas = useRef(null); return ; } useRef()를 이용해 요소를 선택하고, canvas 객체에 요소가 제대로 담기는 시점(Drawing 컴포넌트 렌더링이 완료되는 시점 이후)에 컨텍스트를 생성할 수 있음. export default function Drawing() { const canvas = useRef(null)..
JavaScript/React 2022. 5. 17. 20:48
1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..