useRef로 컴포넌트 안에 변수 만들기

UserList.js

function User({ user }) {
  return (
    <div>
      <p>
        name: <b>{user.username}</b>
      </p>

      <p>
        age: <span>{user.age}</span>
      </p>
    </div>
  );
}

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

App.js

import { useRef } from "react";
import UserList from "./UserList";

function App() {
  const users = [
    { id: 1, username: "bae", age: 22 },
    { id: 2, username: "lee", age: 21 },
    { id: 3, username: "lim", age: 25 },
  ];
  const nextId = useRef(4);

  const onCreate = () => {
    console.log(nextId.current);
    nextId.current += 1;
  };
  return <UserList users={users} />;
}
export default App;

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

• nextId를 useRef로 관리하는 이유 : 값이 바뀐다고 해서 컴포넌트를 리렌더링할 필요는 없음

• useRef는 특정 돔을 선택하고 싶을 때 쓸 수 있지만 그 대신 어떠한 변수를 기억하고 싶을 때
  컴포넌트가 리렌더링 되더라도 계속 기억된다.