ref

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를 설정할 수 있다. 설정하는 방법은 다음과 같다.

 

컴포넌트에 ref 달기