[React] useRef로 컴포넌트 안의 변수 만들기

🍥 이번 시간에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법에 대해서 알아보겠다.

 

여기서 말하는 변수는 다음과 같다.

예를 들어 컴포넌트 내부에서 let 키워드를 사용하여 어떤 변수를 선언한다고 가정해보자.

그렇게 하면 다음에 리렌더링 될 때에는 그 변수 값은 초기화 된다.

 

만약 계속 유지하고 싶으면 즉 어떤 값을 관리하려면 이전에 배웠던 useState를 사용해야 되는데,

useState는 상태를 바꾸게 되면 컴포넌트가 리렌더링 된다.

 

하지만 우리는 가끔씩 어떤 값을 바꿨을 때 리렌더링 할 필요없는 그런 값을 관리하게 될 때도 있다.

그런 경우에는 useRef를 사용하면 된다.

 

또한 useState는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면,

useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다.

 

useRef는 이전에 특정 DOM을 선택할 때 useRef라는 hook을 사용한다고 배웠었다.

이것 외에도 컴포넌트가 리렌더링 될때마다 어떠한 값을 기억할 수 있도록 관리하는데에도 사용할 수 있다.

 

🍥어떤 값들을 관리할 때 useRef를 사용하는가?

주로 어떤 값들을 관리할 때 useRef를 사용하냐면,

• setTimeout, setInterval의 id
• 외부라이브러리를 사용하여 생성된 인스턴스
• Scroll 위치 등 

여기서 알아두어야할 것은 useRef로 관리하는 값은, 값이 바뀌어도 컴포넌트가 리렌더링이 되지 않는다는 것을 알아두어야 한다.

 

🍥 useRef 사용해보기

우리는 App 컴포넌트에서 useRef를 사용해서 변수를 관리해볼 것이다.

용도는 우리가 앞으로 배열에 새 항목을 추가해 볼건데 새 항목에서 사용할 고유 아이디 값을 관리하기 위해 사용하는 것이다.

그걸 하기 전에 해야할 작업이 있다.

 

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}/>

  );

}

✅App.js

 

function UserList({users}){

  return (

      users.map((user) => {

          return <User key={user.id} username={user.username} email={user.email}/>

      })

  )

}

✅UserList.js

userList 안에 있는 users라는 배열을 잘라내서 App 컴포넌트로 옮긴다. 그리고 이것을 UserList의 props로 전달해준다.

userList 컴포넌트 에서는 이것을 props로 받도록 인자에 넣어주면 된다.

 

 const nextId = useRef(4);

  

  const onCreate = () => {

    console.log(nextId.current); // 4

    nextId.current += 1;

  }

App 컴포넌트에서 다음과 같이 nextId를 useRef로 만든다.

현재 배열에 3개의 항목이 있어서 id가 3까지 있기 때문에 nextId를 4로 해준 것이다.

조회하고 싶다면 nextId.current로 조회하면 되고, 값을 변경하려면 위와 같이 작성하면 된다.

 

useState로 변수를 관리해주어도 되지만 굳이 리렌더링 할 필요가 없다면 useRef로 변수를 관리해줘도 괜찮다.

 

🍥 요약

useRef는 특정 돔을 선택하고 싶을 때 쓸 수도 있지만 대신에 어떤 변수를 기억하고 싶을 때 사용할 수도 있으며 값이 바뀐다고 해서 리렌더링 되지 않는다.