React - 컴포넌트 props 초기값으로 잘못 전달

문제 상황

Notice 컴포넌트에서 Pagination 컴포넌트로 noticeTotalPosts 값이 0(초기값)으로 전달되는 현상
(올바르게 동작한다면 noticeTotalPosts 값이 35로 전달되어야 하는 상황)

• perPost의 noticePerPage 값은 올바르게 전달 확인됨.
• totalPosts는 noticeTotalPosts 값은 초기값 0으로 전달 확인됨.

문제 원인

• noticeTotalPosts 값이 처리되기 전에 이미 Pagination 컴포넌트를 호출할 때 초기값이 전달된 것이 문제

문제 해결

• noticeTotalPosts 변수에 계산된 값이 올바르게 할당되고 난 이후 시점에 Pagination 컴포넌트를 호출하도록 변경
• A가 존재하면 Pagination 컴포넌트를 호출하고 아니라면 ' ' 표시
  • { A ? Pagination : ' ' }

변경 전

<Pagination perPost={noticePerPage} totalPosts={noticeTotalPosts}/>

변경 후

{noticeTotalPosts ? <Pagination perPost={noticePerPage} totalPosts={noticeTotalPosts}/> : ''}