[React] ref: Dom에 이름 달기 (useRef)

 

특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업을 할 수 있다.

 

이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트에서 DOM에 이름을 다는 것을

ref(reference의 줄임말)

이라고 한다.

 

 

ref는 어떤 상황에서 사용해야 할까?

 

'DOM을 꼭 직접적으로 건드려야 할 때'입니다.

JavaScript 를 사용할 때에는, 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 

리액트에서는 ref로 사용하는데 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용합니다.

 

InputSample.js

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

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  // useRef를 사용해서 객체를 만들어줌
  const nameInput = useRef();
  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { name, value } = e.target;

    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    // current가 해당 DOM을 가리키게된다
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        // DOM을 사용하기 위해 적어준다.
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 :</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

 

App.js

import React from "react";
import InputSample from "./InputSample";

function App() {
  return (
    <>
      <InputSample />
    </>
  );
}

export default App;

 

이렇게 해주면 초기화 버튼을 눌러주면 내용이 삭제되면서 focus가 이름을 작성하는 input으로 옮겨간다. 

 

이때 useRef를 사용하게 되는 것이다.

 

(useRef는 useState와 다르게 값이 변하여도 리렌더링을 하지 않습니다.)