[React] ref 사용

앞서 어쩔 수 없이 DOM에 직접적으로 접근해야 할 때, ref를 사용한다고 배웠다.

ref를 사용하는 두 가지 방법을 알아보자!

① 콜백 함수를 통한 ref 설정

콜백 함수 사용은 ref를 만드는 가장 기본적인 방법으로 ref를 달고자 하는 요소에 ref 콜백 함수를 props로 전달해 주면 된다.

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

• 콜백 함수 사용 예시
  

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

✔ this.input은 input 요소의 DOM을 가리킴.
✔ ref의 이름은 원하는 것으로 자유롭게 지정 가능.
✔ DOM 타입과 관계없이 this.superman = ref처럼 마음대로 지정함.

② createRef를 통한 ref 설정

ref를 만드는 또 다른 방법으로는 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것이다. 이 함수를 사용해 만들면 더 적은 코드로 쉽게 사용 가능하다. (v16.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;

✔ createRef를 사용해 ref를 만들려면?
👉 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아 주어야 함. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어 주면 ref 설정 완료!

✔ 설정한 뒤 나중에 ref를 설정해 준 DOM에 접근하려면?
👉 this.input.current를 조회하면 됨.
콜백 함수를 사용할 때와 다른 점은 이렇게 뒷부분에 .current를 넣어 주어야 한다는 것!