useRef의 용도

컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를 사용해야 한다. 그리고, 함수형 컴포넌트에서 이를 설정 할 때 useRef 를 사용하여 설정한다고 배웠었다.

하지만 useRef는 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;

| 참고자료 |
벨로퍼트와 함께하는 모던 리액트