10. 컴포넌트에서 변수를 관리해주는 useRef

# useRef의 기능은 아래 두 가지이다.

(1) 컴포넌트에서 특정 DOM을 선택해야 할 때

(2) 컴포넌트에서 조회 및 수정할 수 있는 변수를 관리할 때

→ useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되는 것은 아니다.

(상태 State는 '상태를 바꾸는 함수를 호출 > 렌더링 > 업데이트된 상태 조회'하는 반면,

useRef는 설정 후 바로 조회할 수 있음)

​

# useRef 변수로 관리할 수 있는 값은 아래와 같다.

(1) setTimeout, setInterval 을 통해 만들어진 Id

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

(3) scroll 위치

 

// 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를 통해 불러오고, 수정 등등을 하면 된다!

---

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

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook