[Rolling 프로젝트] 롤링페이퍼 메시지 삭제 후 리다이렉트 시 데이터 반영이 안되는 문제 해결

 

사건의 발단

 

위의 롤링페이퍼에 있는 저 메시지들을 삭제를 해야 했다. 휴지통 버튼을 누르면 서버에 delete 리퀘스트가 보내지고 그 이후에는 롤링페이퍼 페이지로 리다이렉트를 시킨다.

 

 

위가 바로 롤링페이퍼 페이지이다. 하지만 삭제를 하고 이 페이지로 리다이렉트를 시키니 삭제된 데이터가 반영되지 않고 그대로 남아있는 것이다. 아마도 react-router의 navigate로 리다이렉트시 url은 다르지만 같은 paper 컴포넌트를 렌더링해서 (중복된 데이터가 많아 어쩔 수 없었음) useEffect가 동작을 안하는 것 같다. 왜 이렇게 생각했냐면 다른 팀원이 post페이지에서 롤링페이퍼를 작성을 하고 롤링페이퍼 페이지에 리다이렉트 될때는 useEffect가 실행되었다.

 

 

간단하지만 별로인 방법 1

메세지 삭제 기능이 있는 edit 페이지를 다른 컴포넌트로 만든다 

 

하지만 위 방식은 굳이 번거롭게 페이지를 하나 더 만드는 거라 개인적으로 별로였다. 무엇보다 가장 별로였던건 UI의 변경이 저 휴지통 버튼만 추가되는데도 서버에서 데이터를 추가로 받아와야 된다는 것이었다. 

물론 edit페이지와 paper페이지를 포괄하는 이름이 아닌 귀찮아서 paper라는 이름으로 계속 가져간 부분이 걸려서 추후에 바꿀 수 있으면 바꿀 예정이다.

 

간단하지만 별로인 방법2

페이지 새로고침

SPA에서 굳이 페이지 새로고침이 일어나는 건 진짜 별로인 거 같다. 이 이상 언급은 하지 않겠다....

 

간단하지만 별로인 방법3

메세지를 삭제하는 request를 보내는 컴포넌트와 paper 페이지 간의 관계의 깊이가 좀 깊었다. paper에서 삭제될 메시지의 id를 알면 되기에 메소드를 prop으로 delete 요청을 보내는 컴포넌트까지 내려주는 방법이 있었다. 하지만 이 과정에서 props drilling 문제가 있었다.

 

멘토링 시간에 받은 피드백

이를 어떻게 해결할지 혼자 고민하기 보다 공유하고 싶었고 멘토링 시간에 이 고민을 공유하는 시간을 가져 보았다. 커스텀 훅으로 만들라는 조언을 받고 바로 적용해 보았다.

 

해결

const filteredIds = [];

export const useHandleDeleteMessage = () => {

  const changeId = (id) => {

    filteredIds.push(id);

  };

  return { filteredIds, changeId };

};

 

위 같은 커스텀 훅을 만들었다. 삭제된 메시지들은 filteredIds 배열에 담기게 되고 이를 이용하여 필터링만 해주면 해결되었다. UI 변경과는 관련이 없는 로직이기에 일반 변수를 이용하였다. 

 

느낀점

프로젝트를 진행하며 다양한 상황과 문제를 마주하다 보니 이에 대한 최적의 해결법을 생각해내는게 너무 재밌었다. 요새 진정한 코딩의 즐거움을 느끼고 있는 중이다~~