[리액트를 다루는 기술] 5장 ref: DOM에 이름 달기

ref

: DOM을 조작하기 위해 리액트 컴포넌트 안에서 id를 사용하는 방법

• id를 사용해도 되지만 DOM에서 id는 유니크해야하므로 같은 컴포넌트를 여러개 사용할 경우 중복되는 경우가 발생하게 된다.
• state로 필요한 기능 구현도 가능하지만 DOM 직접 사용해야하는 경우
  - 특정 input에 포커스 주기
  • 스크롤 박스 조작하기
  • canvas 요소에 그림 그리기 등

1. 콜백함수를 통한 ref 설정

• this.input은 input 요소의 DOM을 가리킨다.
• ref 이름은 임의로 정할 수 있다. this.superman=ref

<input ref={(ref) => {this.input=ref}} />

2. createRef를 통한 ref 설정

• 리액트 16.3버전부터 도입
• 더 적은 코드로 쉽게 사용 가능하다.

input = react.createRef();

handleFocus = () => {
	this.input.current.focus();
}

함수형 컴포넌트에서는 useRef라는 Hook 함수를 사용한다. (React.createRef와 유사)