[React] ref란?

Ref란?

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference의 줄임말) 개념이다.

• ref는 render 메서드에서 생성된 DOM 노드나 리액트 엘리먼트에 접근할 수 있도록 레퍼런스 값을 만들어준다.
• Ref를 통해서 DOM 노드나 리액트 엘리먼트에 접근하여 값을 얻어낼 수 있다.

id 대신 ref?

리액트 컴포넌트 안에서도 id를 사용할 수는 있다. 하지만 컴포넌트의 특성상 여러번 사용되게 되면 HTML에서 id가 중복되어 나타나기 때문에 잘못된 사용이 된다.
반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다.

어떤 상황에서 ref를 사용해야 할까?

ref는 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야한다.

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

ref 사용

클래스 컴포넌트에서는 2가지 방법으로 ref를 사용할 수 있다.

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

콜백 ref

ref를 만드는 가장 기본적인 방법은 콜백함수를 사용하는 것이다.

ex ) 콜백 함수 사용 예시

1. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해준다.
   이 콜백 함수는 파라미터로 ref 값을 전달받고, 그 ref 값으로 컴포넌트의 멤버 변수로 설정해준다.

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

2. ref의 이름으로 해당 ref를 가진 DOM에 접근할 수 있다.

 this.input.focus();

ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다.

createRef

createRef는 리액트 v16.3부터 도입되었다.

ex ) createRef 사용 예시

1. 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아 준다.

class RefSample extends Component {
 	input = React.createRef();

	...
}

2. 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어준다.

	...
	
    render() {
      return (
        <div>
          <input ref={this.input} />
        </div>
      );
    }
}

3. ref를 설정해 준 DOM에 접근하기 위해서 콜백 함수를 사용할 때와 다르게 .current를 넣어준다.

this.input.current.focus();

컴포넌트에 ref 달기

리액트에서는 컴포넌트에도 ref를 달 수 있다. 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다.

사용법

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

MyComponent 내부의 메서드 및 멤버 변수에도 접할 수 있다 (예: myComponent.handleClick, myComponent.input 등).

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

정리

• 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용
• ref를 사용하지 않고도 원하는 기능을 구현할 수 있는 경우는 사용 X
• 함수형 컴포넌트에서는 useRef라는 Hook 함수를 사용 (추후 8장에서 나올 예정)