[useRef] useRef란?

1. useRef란?

• useRef란 특정 DOM을 선택할 수 있게끔 해주는 기능을 가진 녀석입니다. 리액트를 사용할 때 간혹 DOM을 직접 선택해서 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야 된다던지, 또는 포커스를 설정해줘야 하던지 다양한 상황이 있습니다. 이럴 땐 리액트에서 ref라는 것을 사용합니다. 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hooks함수를 사용합니다.

• useRef를 이용하여 코드를 구현해보도록 하겠습니다.

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

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

  const { name, nickname } = inputs; 

  const onChange = e => {
    const { value, name } = e.target; 
    setInputs({
      ...inputs,
      [name]: value 
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

• 이런식으로 useRef 함수를 통해 Ref객체를 만들고 우리가 선택하고 싶은 DOM에 ref값으로 설정해 줍니다. 지금은 input name에 설정이 되어 있습니다. 그러면 Ref객체의 .current 값이 우리가 원하는 DOM을 가르키게 됩니다. focus를 저런식으로 사용하는 이유는 React에서는 focus를 따로 설정하기가 힘들기 때문에 이런식으로 사용하는 것이다.