React의 타입 비교와 key의 역할

요즘 다시 Advanced React를 읽으며, React에서 key가 DOM 재사용 여부를 어떻게 결정짓는지에 대한 내용에 대해 정리해보았다. 

타입 비교는 "DOM 재사용" 여부를 결정한다.

const App = () => {
  const [isMarketMember, setIsMarketMember] = useState(false);
  ....
  return (
    <>
      {isMarketMember ? (
        <Input
          id="market-id"
          placeholder="Enter your Market ID"
          onChange={handleMarketIdChange}
        />
      ) : (
        <Input
          id="user-name"
          placeholder="Enter your Name"
          onChange={handleNameChange}
        />
      )}
    </>
  );
};

 

위의 코드를 보면 isMarketMember 값에 따라 <Input /> 컴포넌트가 바뀌는 동작을 당연히 기대하지만, 실제 사용자 경험에서는 입력값이 유지된다. 즉, Market ID를 입력한 뒤 체크박스를 해제하면 Name 입력창이 나오는데, 방금 전 Market ID 필드에 입력했던 값이 그대로 보인다.

왜 입력값이 유지될까?

이 현상은 React가 두 컴포넌트를 같은 것으로 간주했기 때문이다.
즉, 리렌더링은 일어났지만 기존 DOM 노드를 재사용했기 때문에 input의 내부 상태가 그대로 남아있는 것이다.

리액트 동작을 살펴보자.

 

React는 JSX를 다음과 같은 식으로 처리한다.

<Input
  id="market-id"
  placeholder="Enter your Market ID"
  onChange={handleMarketIdChange}
/>

 

위 코드는 내부적으로 다음처럼 변환된다.

React.createElement(Input, {
  id: 'market-id',
  placeholder: 'Enter your Market ID',
  onChange: handleMarketIdChange,
});

 

즉, JSX는 결국 React.createElement(type, props)로 변환되며, React는 이 type 값을 기준으로 "같은 컴포넌트인지"를 판단한다.

• 타입이 같다면 = 같은 컴포넌트
• 같은 컴포넌트라면 = 기존 DOM 노드를 재사용
• props만 바뀌었다면 = DOM은 그대로 두고 변경만 적용

결과적으로, <Input />이 JSX 안에서 조건문으로 감싸졌더라도 React 입장에서는 매번 동일한 Input 타입이므로, 같은 컴포넌트라고 간주하여 기존 DOM을 재사용하고, 내부 상태도 그대로 유지되는 것이다.

그럼 어떻게 해결할 수 있을까?

key를 사용하면 된다. React에게 두 컴포넌트가 완전히 다른 컴포넌트임을 알려주고 싶다면, 고유한 key 값을 지정해줘야 한다.

{isMarketMember ? (
  <Input
    key="market"
    id="market-id"
    placeholder="Enter your Market ID"
    onChange={handleMarketIdChange}
  />
) : (
  <Input
    key="personal"
    id="user-name"
    placeholder="Enter your Name"
    onChange={handleNameChange}
  />
)}

 

이렇게 key가 다르면 React는 이전에 렌더링 된 DOM 노드를 제거하고, 새로운 컴포넌트 트리를 생성한다. 따라서 <Input key="market" />와 <Input key="personal" /> 은 동일한 위치에 있더라도 서로 다른 컴포넌트로 인식된다.

그 결과, 전환이 일어날 때 기존 컴포넌트를 언마운트 하고, 새로운 컴포넌트를 마운트 하게 되어 input value가 초기화된다.

즉, type이 다르거나 key가 다르면, React는 동일한 위치에 있더라도 다른 컴포넌트로 간주하고 기존 DOM 노드를 제거한 뒤 새롭게 생성한다.

key에는 유니크한 값을 넣어야 한다.

이 말은 단순한 규칙이 아니라, React가 컴포넌트의 상태를 일관되게 관리하기 위한 핵심 원칙이다. 특히 정렬이 가능하거나, 사용자가 드래그로 리스트의 순서를 바꾸는 UI에서는 해당 원칙이 무너지면 컴포넌트의 상태와 실제 데이터가 뒤섞이는 버그가 발생할 수 있다.

 

예를 들어 아래와 같은 사용자 리스트가 있다고 하자.

[
  { id: 'member-number', placeholder: 'Enter your member number' },
  { id: 'user-id', placeholder: 'Enter your user ID' },
]

 

사용자가 필터를 적용하거나 드래그로 순서를 바꾸면, 리스트는 아래와 같이 바뀔 수 있다.

[
  { id: 'user-id', placeholder: 'Enter your user ID' },
  { id: 'member-number', placeholder: 'Enter your member number' },
]

 

이 상태에서 리스트를 아래처럼 index를 key로 사용하면, 요소의 순서가 바뀌었을 때도 React는 동일한 key로 판단하고 기존 DOM 노드를 재사용한다. 이로 인해 사용자 입력값, 포커스 상태 등 컴포넌트의 내부 상태가 엉켜버리는 문제가 발생할 수 있다.

{list.map((item, index) => (
  <Input
    key={index}
    id={item.id}
    placeholder={item.placeholder}
  />
))}

 

 

https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Rendering Lists – React