데이터 배열
posts, todos처럼 화면의 원본이 되는 목록을 준비합니다.
React 리스트 렌더링 안정화 흐름
데이터 배열을 map으로 컴포넌트 목록으로 바꾸고, 변하지 않는 key를 붙이면 삽입과 재정렬 후에도 React가 같은 항목을 안정적으로 찾습니다.
컴포넌트 분리
아이템 UI는 PostItem처럼 작고 명확한 컴포넌트로 나눕니다.
안정적인 key
index 대신 데이터의 고유 id를 가장 바깥 요소에 붙입니다.
before
A(id: 1), B(id: 2), C(id: 3) · update · X(id: 4)가 중간에 삽입되고 B와 C의 위치가 밀립니다.…
핵심React 리스트 렌더링 안정화 흐름은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.