카드 삭제 후 메인으로 이동되었을 때 Book의 카드 목록에 삭제가 반영 안되는 문제 해결 about phoca-review HOT 1 CLOSED

해결법

• 해결하기 위해 페이지 state로부터 카드 정보를 분리해서, Paper에서 카드를 split해서 렌더링해주는 방법도 물론 생각해봤다.
  그러면 카드가 삭제되어 모두 앞으로 당겨져야 한다고 해도 다시 알아서 개수에 맞게 split될 것이기 때문이다.
• 하지만 페이지를 넘길 때는 넘어가는 애니메이션을 위해 필연적으로 Paper가 리렌더링되고, 이때는 아무리 카드 컴포넌트에 React.memo를 해도 카드도 매 넘김마다 리렌더링되는 것을 피할 수 없다.
• 따라서 페이지 state에 카드 데이터가 종속되는 것은 필연적이라고 결론내렸다. 그렇다면 이를 해결하기 위해 전체 페이지에 카드를 다시 분배해서 refresh 하는 방식으로 문제를 해결해야 한다고 생각했다.

1. 카드가 삭제되어서 앞으로 당겨져야 할 때 페이지에 카드를 다시 분배해주기 위한 전체 페이지 재생성 함수를 작성한다.
2. 삭제 버튼을 누르는 행위를 할 때 사용할 onDeleteHandler 함수를 만든다. 이 함수는 cardList state에서 특정 id의 카드를 제거하고, 이 새로운 카드 정보와 앞에서 작성한 전체 페이지 재생성 함수를 이용해 삭제가 반영된 페이지 정보를 내놓는다.
3. Book페이지에서 카드 상세페이지에 이 onDeleteHandler 함수를 전달해주기 위해 Outlet Context를 이용해 Props로 내려준다.
4. 카드 상세페이지는 이 onDeleteHandler를 받아 모달창의 삭제 버튼에 부착한다. 그러면 삭제 버튼을 누르면 상세페이지를 닫아도 이전 페이지에 카드 삭제가 반영되어 보인다.

추가로 파생된 문제 (새로운 데이터 fetch때마다 발생하는 문제)

• 카드 삭제를 하면 그 정보가 페이지에 반영되어 보인다. 멋지다.
  근데 새로운 데이터를 fetch하게 되면 카드 데이터가 기존의 페이지의 빈 공간을 채우는 방식으로 데이터가 추가되는 게 아니라 새로운 Paper가 생성되어 페이지째로 덧붙여지는 것이기 때문에 새로 fetch되어 덧붙여진 페이지 바로 이전 페이지에는 빈 공간이 남아버리는 현상이 생긴다.

-> 카드 fetch 때마다 앞에서 만든 '전체 페이지 refresh 함수'를 실행하도록 했다. 그러면 fetch로 새 페이지가 덧붙여져서 바로 전 페이지에 빈 공간이 생겨도 재배열을 해주기 때문에 괜찮다.
카드를 삭제하지 않고 그냥 이용을 해도 전체 페이지를 다시 렌더링해야 한다는 문제를 제기할 수도 있을 것이다.
하지만 매 페이지를 넘길때마다 실행되는 것도 아니고 4페이지마다 새로 fetch될 때 전체를 다시 한번 계산하는 정도의 부담은 별것 아니기 때문에 괜찮은 방법이라고 생각한다.

from phoca-review.