[ react ] Warning: Each child in a list should have a unique “key” prop.

 

❗️에러메모❗️

 

react 에서 .map을 사용할 경우가 있습니다. 저의 경우에는 카드 영역의 리스트들을 .map을 통해 카드 컴포넌트들을 반환해 주고 있었는데요. 다음과 같은 error 를 뱉어 내서 당황스러웠습니다.

Warning: Each child in a list should have a unique "key" prop.

직역해 보면 ⁠ ⁠
경고: 목록의 각 하위 항목에는 고유한 "key" 속성이 있어야 합니다

 

⁠.map을 통해 컴포넌트의 고유한 key 값을 prop 으로 넘겨주면 되겠다 싶었는데 , 해결되지 않았습니다.

 

 

Ex-code)

postState.posts.map((post,idx) => (
     <BlogCard
        title={post.title}
        author={post.author}
        coverPhoto={post.coverPhoto}
        coverPhotoLight={post.coverPhotoLight}
        dataPublished={post.dataPublished}
        slug={post.slug}
        myKey = {post.id}
        postChk={"show"}
      />
))

 

.map 함수 몸체에 있는 BlogCard 컴포넌트에 key 값을 부여하는 방식이 아닌 , BlogCard 컴포넌트를 <Fragment> 로 감싼 뒤 key 값을 같이 부여하여 , unique 에러를 해결....

 

 

Solution-code)

postState.posts.map((post,idx) => (
 // 컴포넌트를 감싼 형태에서 Fragment 에 key 값을 줌으로써 BlogCard 컴포넌트의 unique key 값 유지
    <Fragment key={post.id}>
      <BlogCard
        title={post.title}
        author={post.author}
        coverPhoto={post.coverPhoto}
        coverPhotoLight={post.coverPhotoLight}
        dataPublished={post.dataPublished}
        slug={post.slug}
        postChk={"show"}
      />
    </Fragment>  
))