[React Project] 댓글 기능 트러블 슈팅

 

문제

• 댓글 등록 후 댓글 삭제 버튼 클릭 시 새로고침을 해야 정상적으로 삭제됨

 

원인

• 제일 처음 화면이 렌더링 될 때 댓글 정보를 한 번만 가져옴.
• 댓글 등록 버튼 클릭 시 : setCommentsData로 댓글 UI만 먼저 렌더링 된 후에 addDoc으로 db에 댓글 내용이 저장됨
• 그 후에 저장된 댓글 정보를 db에서 가져오지 않아 화면에 그려진 댓글 콘텐츠들이 사실상 내용 없이 비어있었음
• 눈에 보이기만 하고 비어있는 요소의 삭제버튼을 눌러봤자 db에서 삭제되지 않음
• 따라서 새로고침 전까지는 삭제버튼이 작동하지 않다가 새로고침 후(=렌더링 되며 db에서 댓글 정보를 가져온 후)에야 삭제됨

01

 

해결책

• 댓글을 db에서 가져오는 함수를 별도로 분리함
• 분리한 함수를 처음 렌더링 시, 댓글 등록 버튼 클릭 시 각각 실행되도록 변경함