[react] props를 state로 설정하여 state 변경 실시간 업데이트해주기(feat. Typescript)

메인 프로젝트를 진행하며 가장 궁금했던 부분.. 바로 state 변경 시 화면에 실시간으로 업데이트를 시켜주는 것이다.

댓글이 수정 되었을 때 그것이 실시간으로 반영이 되도록 만들고 싶은데, 이를 위해 매번 state 변경 이후 GET 요청을 보내주어 변경사항을 반영해주어야하는지에 대한 고민을 많이 하였다.

결국 멘토님께 질문을 했고 멘토님께서 해주신 말씀은 이렇다.

자식 컴포넌트의 상태는 자식 컴포넌트에서 관리해야한다. 자식 컴포넌트가 바뀌었다고 그걸 부모 컴포넌트에서 다시 뿌려주는 과정을 거쳐야할까? 부모 컴포넌트는 뿌려주기만 할 뿐, 자식의 상태는 자식이 지지고 볶아야 한다. 

(적어도 내가 이해한 바로는 이렇다^^7 맞나요 멘토님..? 데헷)

주신 피드백을 바탕으로 댓글 추가/수정/삭제 기능의 리팩토링을 진행하였다.

원래는 댓글이 추가되면 부모 컴포넌트에서 댓글 리스트에 대한 GET 요청을 보내서 실시간 업데이트 된 댓글 리스트가 뿌려질 수 있도록 하였으나, 단일 댓글이 수정된 것인데 굳이 전체 리스트를 다시 가져올 필요성은 없다! 

결론적으로, 단일 댓글에 대한 props도 state로 설정하여 변경/관리해줄 수 있다!

 

자, 리팩토링을 해보자.

먼저 단일 댓글에 대한 state를 만들어준다.

  // Comment 객체
  const [newSingleComment, setNewSingleComment] =
    useState<IcommentProps>(singleComment);

그 다음 댓글 수정에 대한 네트워크 통신이 끝나면

setNewSingleComment({
        ...newSingleComment,
        ...{ comment: editedComment, createdat: new Date().toLocaleString() },
      });

이렇게 단일 댓글에 대한 state를 변경시켜주어 모든 리스트를 가져오지 않고도 화면에 변경 된 댓글을 바로 반영하여 보여줄 수 있다!

 

이제 더 이상 단일 데이터 수정 건으로 부모 컴포넌트에서 GET 요청할 필요 없다! 멘토님 감사합니다.... 우리 팀 멘토님은 짱짱맨이야! 보고싶습니다 멘토님..