ref 속성

Ref 란 무엇인가요?

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법입니다.

 

Ref는 어떤 상황에서 사용해야 되나요?

"DOM을 꼭 직접적으로 건드려야 할 때" 사용합니다.

그렇기 때문에 자주 사용하는 속성은 아닙니다. 대부분 state를 통해 해결할수 있습니다.

 

그렇기 때문에 반드시 DOM을 꼭 사용해야 하는 상황외에는 잘 사용하지 않습니다.

 

반드시 사용해야 하는 상황이 어떤 상황인가요?

1. 특정 input에 포커스 주는 경우

2. 스크롤 박스를 조작하는 경우

3. Canvas  요소에 그림을 그리는 경우

 

위의 세가지 경우에는 직접적으로 DOM을 건드려야하기 때문에 Ref를 사용해야 합니다.

 

Ref 사용 방법?

ref를 사용하는 방법은 두가지 입니다.

 

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

 

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

ref를 달고자 하는 요소 ref라는 콜백 함수를 props로 전달해 주면 됩니다.

 

이 콜백 함수는 ref 값을 파라미터로 전달 받습니다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다.

 

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

// 콜백함수 사용 예시

 

2. createRef를 통한 ref 설정

 

ref를 사용하는 또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것입니다. (v.16.3 부터 적용)

// CreateRef 사용 예시

import React, { Component } from 'react';

class RefSample extends Component {
	input = React.createRef();
    
handleFocus = () => {
	this.input.current.focus();
}

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

export default RefSample;