useRef로 컴포넌트 안의 변수

useRef는 DOM 을 선택하는 용도 외에도 다른 용도가 한 가지 더 있다.
=> 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것

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

useRef 변수로 관리 가능한 값

• setTimeout, setInterval을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

코드 실습

목표

useRef 를 사용하여 변수 관리하기

용도

배열에 추가된 새로운 항목에서 사용할 고유한 id를 관리한다.

필요한 사전 작업

UserList 컴포넌트 내부에서 배열을 직접 선언해서 사용을 하던 방법이 아닌,
이 배열을 App에서 선언하고 UserList에게 props로 전달

App.js

import React 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'
    }
  ];
  return <UserList users={users} />;
}

export default App;

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

이제 App 에서 useRef() 를 사용하여 nextId 라는 변수를 만들어보겠습니다.

App.js

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를 조회한다.

출처: https://react.vlpt.us/basic/12-variable-with-useRef.html