[React 기초 다지기] 5장 - ref: DOM에 이름 달기

※ 이 문서는 김민준 저자의 "리액트를 다루는 기술" 책을 통해 공부하며 정리한 내용 입니다.

---

1. ref는 어떤 상황에서 사용해야 할까?

특정 DOM에 작업을 해야 할 때 ref를 사용할 수 있습니다. (DOM을 직접적으로 건드려야 할 때)

물론 id를 사용할 수 있지만 이는 html 전역에서 사용되기 때문에 유니크 하지 않아 잘못된 결과를 가져올 수 있습니다. ref의 경우 컴포넌트 내부에서만 작동하기 때문에 다른 컴포넌트와 결합 시에도 충돌 없이 유니크 한 값을 유지할 수 있습니다.

• DOM을 꼭 사용해야 하는 상황

특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 요소에 그림 그리기 등

2. ref 사용

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

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

• ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됩니다. 이 콜백 함수는 ref 값을 파라미터로 전달받습니다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.
• 위 예제와 같이 this.input은 input 요소의 DOM을 가리킵니다.
• this.input.focus(); 를 통해 해당 DOM에 focus 설정을 할 수 있습니다.

   2) createRef를 통한 ref 설정 (React v16.3 이상)

Class RefSample extends Component {
	input = React.createRef();
    
    handleFocus = () => {
    	this.input.current.focus();
    }
    
    render() {
    	return {
        	<div>
            	<input ref={this.input}
            </div>
        };
    }
}

• createRef를 사용하여 ref를 만드려면 우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아 주어야 합니다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref prorps로 넣어 주면 ref 설정이 완료 됩니다.
• ref를 설정한 DOM에 접근하려면 this.input.current를 조회하면 됩니다.

3. 콤포넌트에 ref 달기

<MyComponent
    ref={(ref) => {this.myComponent=ref}}
/>

• 면 this.input.current를 조회하면 됩니다.