[React] empty tag key 값 설정 에러

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

• 외부 API를 받아와 렌더링하는 과정에서, 각 컴포넌트에 key 값을 설정했음에도 불구하고 'Each child in a list should have a unique "key" prop.' 과 같은 에러가 발생했다.
• 이는 빈태그를 사용하여 key 값을 설정하지 못했기 떄문이다.

// 에러가 발생했던 컴포넌트 코드

posts.map((post: Posts) => {
              return (
                <>
                  <Container key={post.post_id}>
                    <SubComponent
                      post_id={post?.post_id}
                      description={post?.description}
                      title={post?.title}
                    />
                  </Container>
                </>
              );

• div 대신 빈 태그를 사용하면 불필요한 DOM 노드 생성을 방지할 수 있지만, 컴포넌트에서 외부 API를 받아와 map 메서드를 사용하여 반복하는 경우에는 각 컴포넌트에 key 값을 지정해줘야 하는데, 빈 태그는 key를 사용할 수 없다는 단점이 있다.

posts.map((post: Posts) => {
              return (
                <React.Fragment key={post.post_id}>
                  <Container>
                    <SubComponent
                      post_id={post?.post_id}
                      description={post?.description}
                      title={post?.title}
                    />
                  </Container>
                </React.Fragment>
              );

• 그리하여 <>,</> 대신 <React.Fragment>,</React.Fragment> 를 사용하여 key 값을 설정해 문제를 해결한다.