List Rendering & Key

실제 앱의 많은 화면은 하나의 카드가 아니라 같은 구조가 여러 번 반복되는 목록입니다. 그런데 항목이 추가되거나 순서가 바뀔 때 React가 각 행을 제대로 구분하지 못하면, 입력 중인 값이 다른 행으로 옮겨 가거나 불필요한 재렌더가 발생할 수 있습니다.

초기 DOM 조작 방식에서는 목록이 바뀔 때 전체 구간을 통째로 다시 그리거나, 개발자가 직접 어떤 노드를 재사용할지 관리해야 했습니다. React는 렌더 결과를 트리로 다루며 이 부담을 줄였지만, 목록 항목의 정체성을 알려 줄 안정적인 key가 필요했습니다.

컴포넌트는 배열을 map으로 순회해 각 항목을 JSX로 바꾸고, 각 행에 key를 부여합니다. 이후 다음 렌더에서 배열이 달라지면 React는 key를 기준으로 이전 항목과 현재 항목을 맞춰 보고, 실제로 바뀐 부분만 반영합니다. 그래서 key는 단순한 경고 해소용 값이 아니라 상태 보존의 기준선입니다.

목록 렌더링과 조건부 렌더링은 모두 동적 UI를 만들지만, 목록 렌더링은 반복과 식별 문제를 다룹니다. 특히 key는 화면에 보이는 값과는 별개로, 같은 항목이 시간에 걸쳐 같은 존재인지 React에게 알려 주는 메타정보라는 점이 중요합니다.

실무에서는 데이터베이스 ID나 서버가 준 고유 식별자를 key로 쓰는 것이 가장 안정적입니다. 인덱스를 key로 쓰면 정렬, 삽입, 삭제가 일어날 때 항목 정체성이 밀려서 입력 상태가 섞일 수 있습니다. 리스트가 느리다고 느껴질 때는 렌더 횟수만 보지 말고 key 품질부터 점검하는 편이 맞습니다.