게시글 작성시 post.id를 읽지 못 하는 문제가 있습니다.

해당 문제는 아래와 같이 filter()를 사용해 거른 출력값을 다시 map()을 사용하여 렌더링 되도록 해결했습니다.

//before
{mainPosts.map((post) => (
  <PostCard key={post.id} post={post} />
))}

//after
{mainPosts.filter(Boolean).map((post) => (
  <PostCard key={post.id} post={post} />
))}

이렇게 작성하면 undefined가 포함되지 않은 배열이 출력될 것이라고 예상했습니다만, 여전히 콘솔에는 해결되기 전과 동일하게 출력됩니다.

문제는 해결됐지만 예상한 것과 달라 신경이 쓰입니다. 제가 접근한 방식이 틀린 것인지, 틀린 것이라면 어떻게 접근하여 문제를 해결해야 하는지 궁금합니다.

또한 위 해결방법에서 왜 이전과 동일하게 출력값이 뜨는건지도 궁금합니다.

먼저 렌더링될리가 없습니다. 왜냐하면 mainPosts의 개수가 늘어나야 postCard가 렌더링되는데 mainPosts의 개수는 데이터가 불러와진 후에 늘어나기 때문입니다. mainPosts에 undefined가 들어가고 있는건 아닌지 리덕스 데브툴로 검사해보세요.