React에서 key prop은 리스트나 iterable 객체 렌더링 시 중요한 역할을 하지만, 상태(state) 관리에도 영향을 미칠 수 있다.

key의 역할

  • React에서 key는 각 컴포넌트의 고유성을 보장하여 변경 사항을 효율적으로 감지하고 업데이트하는 역할을 한다.
  • 리스트를 렌더링할 때 key가 변경되지 않으면 기존의 컴포넌트가 유지되며, 변경되면 해당 컴포넌트는 새로운 것으로 인식된다.

key가 state에 미치는 영향

  • key가 변경되면 React는 기존 컴포넌트를 제거하고 새로운 컴포넌트를 생성한다.
  • 즉, key 값이 바뀌면 해당 컴포넌트의 상태가 초기화된다.
  • 이는 같은 컴포넌트를 여러 개 사용하면서 개별적으로 상태를 유지하고 싶을 때 유용하게 활용할 수 있다.
import { useState } from "react";

type Props = {
  id: number;
};

const MyComponent = ({ id }: Props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>컴포넌트 ID: {id}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

const App = () => {
  const [componentId, setComponentId] = useState(1);

  return (
    <div>
      <button onClick={() => setComponentId(componentId + 1)}>
        컴포넌트 변경
      </button>
      <MyComponent key={componentId} id={componentId} />
    </div>
  );
};

위 코드에서 key={componentId}를 변경하면 MyComponent의 상태(count)가 초기화되는 것을 확인할 수 있다.

useState의 초기화 방식

React의 useState는 컴포넌트가 최초 렌더링될 때 한 번만 초기화된다.

const [count, setCount] = useState(0);

위 코드에서 count의 초기값 0은 컴포넌트가 처음 마운트될 때 한 번만 설정된다. 이후 상태가 변경되어도 useState(0)의 0이 다시 초기화되지 않는다.

만약 컴포넌트가 다시 마운트되면 useState는 다시 초기화된다. 앞서 설명한 key를 활용하면 이를 강제로 초기화할 수 있다.

요약

  • key prop이 변경되면 React는 기존 컴포넌트를 제거하고 새로운 컴포넌트를 생성하여 상태가 초기화된다.
  • useState는 컴포넌트가 처음 마운트될 때 한 번만 초기화된다.
  • key를 활용하면 특정 컴포넌트의 상태를 강제로 초기화할 수 있다.

참고 자료