map은 배열을 JSX 목록으로 바꾸고 key는 아이템을 식별한다
리스트가 추가, 삭제, 이동될 때 React가 기존 DOM과 상태를 안정적으로 재사용하게 돕는다.
data arrayposts, products, comments 같은 원본 목록
→
map()각 데이터를 JSX 아이템으로 변환한다.
→
key아이템의 고유 ID로 변경 대상을 찾는다.
고유 ID데이터베이스 id처럼 변하지 않는 값을 쓴다.
index 주의순서가 바뀌는 목록에서는 상태가 뒤섞일 수 있다.
재조정 힌트React가 최소 변경으로 UI를 갱신하게 한다.
{posts.map(post => <PostItem key={post.id} post={post} />)}