React useRef

사용 개요

JS를 사용할 때 특정 DOM을 선택해야 하는 상황(getElementById, querySelector)와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 발생한다.

예를 들어, Chart.js, D3.js와 같은 특정 엘리먼트를 접근을 해야하는 경우 등 다양한 상황이 존재한다.

사용법1

함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용한다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다.

 

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; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value, // 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;

 

사용법2

useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있는데, 바로 컴포넌트 안에 조회 및 수정할 수 있는 변수를 관리하는 것이다.

 

useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 재랜더링이 되지 않는다.

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 가능하다.

 

이 변수를 사용하여 다음과 같은 값을 관리 할 수 있다.

- setTimeout, setInterval을 통해서 만들어진 id

- 외부 라이브러리를 사용하여 생성된 인스턴스

- scroll 위치

 

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.

그리고 이 값을 수정할 때에는 .current 값을 수정하면 되고 조회할 때는 .current 값을 가져오면 된다.