React 키 관리와 리스트 렌더링 해결법

소개

리스트 렌더링은 UI 개발에서 매우 흔한 작업이다. 그런데 키(key) 사용이 부적절하면 컴포넌트가 예기치 않게 재렌더되거나 상태가 꼬이는 문제가 발생한다. 이 글에서는 왜 키가 중요한지, 흔한 실수와 올바른 패턴, 성능 관점에서의 고려사항을 차근히 설명한다. 초보자도 따라오기 쉽도록 예제와 원칙을 중심으로 구성했다.

키가 필요한 이유

리액트의 재조정(Reconciliation)

리액트는 가상 DOM을 비교해 실제 DOM을 효율적으로 업데이트한다. 이 과정에서 리스트 항목을 식별할 수 있는 값이 필요하다. 키는 항목의 동일성을 판단하는 식별자 역할을 한다. 적절한 키가 있으면 항목의 이동, 추가, 삭제 시 불필요한 DOM 변경을 줄인다.

상태 유지와 키

각 항목이 자체 상태를 가질 때 키는 상태를 올바르게 매핑하는 역할을 한다. 키가 불안정하면 상태가 다른 항목으로 옮겨가거나 초기화되는 현상이 발생한다.

흔한 실수와 그 영향

인덱스를 키로 사용하는 경우

배열의 인덱스를 키로 쓰면 항목 추가나 삭제 시 키가 재할당되어 컴포넌트가 잘못 재사용된다. 이는 입력값 손실, 포커스 이동 문제, 애니메이션 오류 등으로 이어진다.

items.map((item, index) => <Item key={index} data={item} />)

변경 가능한 값을 키로 사용

예를 들어 타임스탬프나 랜덤값을 키로 쓰면 매 렌더링마다 키가 바뀌어 항상 새로 생성되거나 상태가 초기화된다. 키는 항목의 정체성을 나타내는 불변 값이 되어야 한다.

안전한 키 선택 전략

항상 고유하고 불변인 식별자 사용

서버에서 제공하는 고유 id가 가장 안전하다. 데이터베이스의 기본 키나 UUID처럼 항목을 안정적으로 식별할 수 있는 값을 사용한다.

items.map(item => <Item key={item.id} data={item} />)

키가 없는 경우의 처리

임시로 로컬에서 생성한 항목에 id가 없다면, 삽입 시 고유 id를 생성해서 상태에 포함시키는 것이 좋다. 그러면 이후 업데이트에서도 키가 안정적으로 유지된다.

const newItem = { id: generateId(), text: '새 항목' };
setItems(prev => [...prev, newItem]);

동적 리스트 업데이트 패턴

추가, 삭제, 정렬이 빈번한 리스트에서는 키의 안정성이 성능과 사용자 경험에 직접 영향을 준다. 아래 원칙을 지키면 안전하게 상태를 관리할 수 있다.

• 항목 생성 시 id를 부여한다.
• 항목을 직접 변경하지 않고 불변성을 유지하며 새로운 배열을 만든다.
• 정렬은 뷰 레벨에서만 처리하고 id는 변경하지 않는다.

예시: 안전한 삭제

function removeItem(id) {
  setItems(prev => prev.filter(item => item.id !== id));
}

성능 고려사항

키가 적절하면 리액트는 최소한의 변경만 적용한다. 그러나 불필요한 재생성이 발생하면 렌더 비용이 커진다. 다음을 점검하면 성능을 개선할 수 있다.

• 불변성 유지로 얕은 비교 재사용을 가능하게 한다.
• 복잡한 아이템은 React.memo로 감싸서 자주 변하지 않는 항목의 재렌더를 방지한다.
• 큰 리스트는 가상화 라이브러리(react-window 등)를 고려한다.

React.memo 예시

const Item = React.memo(function Item({ data }) {
  return <div>{data.text}</div>
});

map key best practice 정리

• 항목 당 고유하고 불변인 id 사용.
• 인덱스는 항목 순서가 고정이고 변경이 없다면 예외적으로 사용 가능.
• 랜덤값이나 타임스탬프는 피한다.
• 입력 폼처럼 내부 상태를 가진 항목에는 특히 안정적 키를 부여.

요약

키는 리스트 렌더링의 핵심 요소다. 적절한 키 선택은 불필요한 재렌더링을 줄이고 상태 일관성을 유지한다. 서버에서 제공되는 고유 id를 우선 사용하고, 로컬 생성 시에도 삽입 시점에 id를 부여한다. 더불어 불변성, React.memo, 리스트 가상화 같은 기법을 적용하면 리스트 렌더링 성능을 개선할 수 있다.

참고 예제 모음

간단한 비교 예제로, 잘못된 키와 올바른 키 사용 차이를 실험해보면 문제 발생 원인을 직관적으로 이해할 수 있다.

// 잘못된 예: 인덱스를 키로 사용
items.map((item, index) => <Item key={index} data={item} />)

// 올바른 예: 고유 id 사용
items.map(item => <Item key={item.id} data={item} />)