ref : DOM에 이름 달기

일반 HTML에서 DOM요소에 이름을 달 경우 id값을 사용한다. <div id=""/> 이런 식으로 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference)이다.

리액트 컴포넌트 안에서는 id를 사용하는 것을 권장하지 않는다.

클래스형 컴포넌트에서 ref 사용하기

콜백함수를 통한 ref 설정

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

// this.input은 input요소의 DOM을 가리킨다.
<input
  ref={(ref) => {
    this.input = ref;
  }}
/>

createRef를 통한 ref 설정

리액트에 내장되어 있는 createRef라는 함수를 통해 설정한다. .current를 통해 접근한다.

import React, { Component } from "react";

class RefSample extends Component {
  // createRef함수를 통해 등록한다.
  input = React.createRef();

  handleFocus = () => {
    // this.input.current로 접근한다.
    this.input.current.focus();
  };

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

export default RefSample;

컴포넌트에 ref 달기

DOM에 ref를 다는 방법과 동일하다. 다음과 같이 작성할 시 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있다. (MyComponent.input 등)

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

함수 컴포넌트에서 useRef를 사용하여 ref 사용하기

useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 currnet 값이 실재 엘리먼트를 가리킨다.

import React, { useRef } from "react";

const example = () => {
  const divEl = useRef(null);
  const divStyle = {
    width: "100px",
    height: "100px",
    backgroundColor: "#666",
  };
  return (
    <div>
      <div ref={divEl} style={divStyle} />
    </div>
  );
};

export default example;