때오도르의 IT 지식 공유 때오도르의 IT 지식 공유

※ 이 문서는 김민준 저자의 "리액트를 다루는 기술" 책을 통해 공부하며 정리한 내용 입니다. 1. ref는 어떤 상황에서 사용해야 할까? 특정 DOM에 작업을 해야 할 때 ref를 사용할 수 있습니다. (DOM을 직접적으로 건드려야 할 때) 물론 id를 사용할 수 있지만 이는 html 전역에서 사용되기 때문에 유니크 하지 않아 잘못된 결과를 가져올 수 있습니다. ref의 경우 컴포넌트 내부에서만 작동하기 때문에 다른 컴포넌트와 결합 시에도 충돌 없이 유니크 한 값을 유지할 수 있습니다. DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 요소에 그림 그리기 등 2. ref 사용 1) 콜백 함수를 통한 ref 설정 {this.input=ref}} /> re..

※ 이 문서는 김민준 저자의 "리액트를 다루는 기술" 책을 통해 공부하며 정리한 내용 입니다. 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 이벤트라고 합니다. 저서에서는 JSBin을 사용해서 테스트를 진행 하였다. 핵심내용 1. 리액트의 이벤트 시스템 1) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. 2) DOM 요소에만 이벤트를 설정할 수 있습니다. div, button, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다. 리액트에서 지원하는 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focu..