[React] Ref 이용하기(feat : createRef, useRef)

안녕하세요! 이번시간에는 리액트에서 쓰이는 Ref에 대해 알아보도록 하겠습니다!

Ref란?

특정 노드나 컴포넌트에 레퍼런스 값을 만들어주는 것입니다. 때문에 Ref를 통해서 노드나 리액트 요소에 접근하여 값을 얻어낼 수 있습니다.

레퍼런스를 만들기 위해선 리액트 내장함수인 createRef와 리액트 훅인 useRef() 가 있는데요. createRef는 클래스형 컴포넌트 useRef()는 함수형 컴포넌트에서 사용합니다.

먼저 클래스형 컴포넌트의 createRef의 코드를 살펴보겠습니다.

클래스형 컴포넌트 코드 살펴보기

import React, { useState } from "react";

import React, { Component } from "react";

class App extends Component {
  state = {
    text: [],
  };
  
  //레퍼런스를 만들기 위한 리액트 내장함수
  //레퍼런스명 = React.createRef();
  inputRef = React.createRef();
  handleAddText = (e) => {
    e.preventDefault();
    
    //해당 레퍼런스(여기서는 input)의 현재 밸류값 가져오기
    const newText = [this.inputRef.current.value, ...this.state.text];
    this.setState({ text: newText });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleAddText}>
        
        //가져오고 싶은 요소에 레퍼런스 속성 및 레퍼런스명 지정
          <input ref={this.inputRef} />
          <button>버튼</button>
        </form>
        <ul>
          {this.state.text.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}
export default App;

함수형 컴포넌트 코드 살펴보기

import React, { useState, useRef } from "react";

function App() {
  const [text, setText] = useState([]);
  const inputRef = useRef();
  const handleAddText = (e) => {
    e.preventDefault();
    setText([inputRef.current.value, ...text]);
  };

  return (
    <div>
      <form onSubmit={handleAddText}>
        <input ref={inputRef} />
        <button>버튼</button>
      </form>
      <ul>
        {text.map((item) => {
          return <li>{item}</li>;
        })}
      </ul>
    </div>
  );
}

export default App;

이런식으로 같은 결과물인 클래스형과 함수형 컴포넌트 각자의 코드를 구성해보았습니다.

먼저, createRef라는 리액트 내장 함수를 이용하여 ref의 명을 만들어줍니다.(함수형에선 useRef라는 리액트 훅 이용)

둘째, 접근하고 싶은 돔 요소에 ref속성을 넣어준 후 첫번째에 만들어준 ref명을 넣어줍니다.

셋째, inputRef.current.value 이런식으로 그 ref에 현재 접근한 것의 value값을 가져오는 식을 적어주면 해당 input의 value값을 가져 옵니다.

---

createRef와 useRef의 차이점

클래스형 컴포넌트는 인스턴스를 생성 후 render 코드 블록 쪽만 리랜더링후 다시 실행 합니다. 하지만 함수형 컴포넌트는 함수 블록 안에 있는 모든 것을 리랜더링시 마다 다시 실행합니다.

때문에, 함수형 컴포넌트에 createRef를 사용 할 시 ref 값이 초기화 되어서 원하는 값을 얻지 못하기 떄문에, 리액트 훅인 useRef를 사용하는 것입니다.
리액트 훅을 사용하면 useState 값을 리랜더링하면 내부적으로 기억하듯이 useRef도 내부적으로 ref값을 기억하여줍니다.

---

이렇게 ref는 돔요소나 리액트 컴포넌트등에 접근하여 원하는 값을 가져올 수 있게 해주는 고마운 존재입니다.

감사합니다

참고자료
https://tech.osci.kr/2019/10/10/82068584/
https://reactjs.org/docs/refs-and-the-dom.html