배열에서 안정적인 리스트 UI까지
데이터 배열을 map으로 컴포넌트 목록으로 바꾸고, 변하지 않는 key를 붙이면 삽입과 재정렬 후에도 React가 같은 항목을 안정적으로 찾습니다.
1
데이터 배열
posts, todos처럼 화면의 원본이 되는 목록을 준비합니다.
2
map()
각 데이터를 JSX로 변환해 React가 렌더링할 배열을 만듭니다.
3
컴포넌트 분리
아이템 UI는 PostItem처럼 작고 명확한 컴포넌트로 나눕니다.
4
안정적인 key
index 대신 데이터의 고유 id를 가장 바깥 요소에 붙입니다.
5
재조정 안정성
재정렬과 삽입 후에도 상태와 DOM이 같은 데이터에 유지됩니다.
삽입과 재정렬이 일어나도 기준은 데이터 정체성입니다
before
A(id: 1), B(id: 2), C(id: 3)
update
X(id: 4)가 중간에 삽입되고 B와 C의 위치가 밀립니다.
after
key가 같은 A, B, C는 기존 컴포넌트 상태를 이어받습니다.
{posts.map(post => <PostItem key={post.id} post={post} />)}