HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.

<div id = "my-element">리액트 고수가 꿈</div>

특정 DOM에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나, JS에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.

리액트에서도 동일한 작업을 할 수 있는데 바로 ref(reference)이다.

1. ref는 언제 사용하나?

https://ko.reactjs.org/docs/refs-and-the-dom.html

리액트 공식문서에는 다음과 같이 나와있다.

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드파티 DOM 라이브러리를 React와 같이 사용할 때

1-1 DOM을 꼭 사용해야 하는 상황

DOM을 꼭 직접적으로 건드려야 할 때 사용하는데... 리액트에서는 state를 이용하여 상태를 관리한다. 즉 DOM을 사용해야할 상황이 많지 않다는 것이다. 그런데 가끔 state만으로 해결할 수 없는 기능이 있다.

• 특정 input을 포커싱하기
• 스크롤 박스 조작
• Canvas 요소에 그림 그리기

위 상황에서는 어쩔 수 없이 DOM에 직접 접근해야하며, 이를 위해 ref를 사용한다.

2. ref 사용

우선 ref를 사용하는 방법은 두 가지이다.

콜백 함수를 통한 ref 설정, createRef를 통한 ref 설정

2-1 콜백 함수를 통한 ref 설정

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref값을 파라미터로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 변수로 설정해 준다.

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

this.input은 input 요소의 DOM을 가리킨다.

2-2 createRef를 통한 ref 설정

ref를 만드는 또 다른 방법은 리액트 내장함수인 createRef를 사용하는 것이다.

React v16.3부터 도입되었으므로 이전 버전에서는 작동하지 않는다.

import {Component} from 'react';

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

createRef를 사용하여 ref를 만드려면 우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아주어야 한다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 된다.
ref를 설정해준 DOM에 접근하려면 this.input.current를 조회하면 되며, 콜백 함수를 사용할 때와 다른 점은 .current를 넣어주어야 한다는 것이다.

어렵다...