[React JS] 리액트를 다루는 기술 - ref: DOM에 이름 달기

 

HTML에서 id를 이용해 DOM에 이름을 다는 것 처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 ref가 있다.

 

 

1. ref을 사용해야 하는 상황

: DOM을 직접 건드려야 할 때 ref를 사용한다.

 

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

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

위와 같은 상황에서는 DOM을 직접적으로 접근해야 하며, 이때 ref를 사용해야 한다.

 

 

2. ref 사용

ref를 사용하는 방법에는 두가지가 있다.

1. 콜백 함수를 사용해 ref 설정
2. createRef 함수를 사용해 ref 설정

 

< 콜백 함수 사용해 ref 설정 >

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해준다.

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

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

위 코드 결과 this.input은 input 요소의 DOM을 가리킨다. 

참고로 this.input에서 input은 ref 이름으로 DOM 타입과 관계없이 자유롭게 지정할 수 있다.

 

 

< createRef 함수 사용해 ref 설정 >

콜백 함수 이외에도 리액트에 내장되어 있는 createRef 함수를 이용해 ref를 만들 수 있다.

 

▶ createRef를 사용해 ref 만들기

1. 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아줘야 한다.
2. 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주어 ref 설정을 완료한다.
3. 설정 후 ref를 설정한 DOM에 접근하려면 this.ref이름.current로 조회 가능하다.

=> createRef는 콜백 함수와 달리 뒷부분에 .current를 넣어주어야 한다.

 

 

 

3. 컴포넌트에 ref 달기

리액트에서는 컴포넌트에 ref를 달 수 있다.

주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓰며, 컴포넌트에 ref를 설정하는 방법은 DOM에 ref를 설정하는 방법과 같다.

class App extends Component{
  render(){
  	return(
      <div>
        <ScrollBox ref = {(ref) => this.scrollBox = ref} />
      </div>
    );
  }
}