c3epmos
2020. 5. 3. 14:16
id
일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 특정 DOM 요소에 어떤 작업을 할 때 id를 달아서 특정 id에 스타일을 적용하거나 자바스크립트를 적용한다.
react에서는 해당 id에 컴포넌트를 렌더링하라는 코드가 있다.
ReactDOM.render(<App />, document.getElementById('root'));
HTML 처럼 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이를 ref 라고 한다.
ref 사용 상황
DOM을 꼭 직접적으로 건드려야 할 때 사용한다. 예를 들어, 특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 등이 있다.
createRef()
React에 내장되어 있는 createRef 함수를 사용해 ref를 설정할 수 있다. 설정하는 방법은 다음과 같다.