React - useRef 사용해 컴포넌트 안의 변수 만들기

useState 를 사용하면 값을 변경하고 관리할 수 있다. 하지만 값을 바꿀 때, 컴포넌트가 리렌더링 된다.

하지만 특정 상황에서는 리렌더링 할 필요가 없는 상황이 있음

=> useRef 사용

- 값이 바뀔 때 리렌더링 될 필요 없을 때

 

주로 아래와 같은 때에 쓰임

 

코드

 

기존 UserList()의 users 배열을 잘라내고 props로 받아온다.

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, index) => (<User user={user} key={index} />)
        )
      }
    </div>
  )
}

export default UserList;

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

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

  const nextId = useRef(4);

  const onCreate = () => {
    // 나중에 id 가 4 인 값 조회 한다면
    console.log(nextId.current);

    // onCreate()를 사용하고
    // nextId값에 1을 더해줌
    // 이 값이 바뀐다고 해서 컴포넌트가 리렌더링 되진 않는다
    nextId.current += 1;
  }

  return (
    <UserList users={users}/>
  );
}

export default App;

 

 

React - 배열 렌더링