컴퍼넌트가 리렌더링 될때마다 지속적으로 기억되는 값을 관리하려면 어떻게 해야할까?

useRef로 관리하는 값은 바뀌어도 컴퍼넌트가 리렌더링 되지 않는다.

이전에 연습했던 배열 컴퍼넌트의 id를 관리해보자.

먼저 UserList 안에 있던 users 배열을 props로 받아오게 할 것이다.

먼저 users 배열을 잘라내서 app.js 로 옮기자.

import React from "react";

import UserList from "./UserList";

function App() {
  const style = {
   margin : '20px'
  }
  const users = [
    {
        id: 1,
        username: 'carrot',
        email: 'carrot@gamil.com'
    },
    {
        id: 2,
        username: 'apple',
        email: 'apple@gamil.com'
    },
    {
        id: 3,
        username: 'tomato',
        email: 'tomato@gamil.com'
    }
];

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

}

export default App;

UserList.js도 app.js에 있는 users를 받아와야 하기 때문에 이에 맞게 수정해준다.

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.js에 있는 users 배열의 id값이 3까지 있으니 그다음에 추가되는 요소의 id 값을 4라고 가정하고 코드를 작성한다.

const nextId = useRef(4);

const onCreate = () =>{

  console.log(nextId.current);
  nextId.current += 1;
  
}

onCreate 배열의 요소가 하나 추가된다면, 해당 id 값인 4를 집어넣고 1을 더해준다.
하나 더 생성하면 id 값이 5가 되는 것이다.

중요한 포인트는 id 값이 바뀐다고 해서 전에 배운 usestate() 처럼 컴퍼넌트가 리렌더링 되는 것이 아니다 라는 것이다.