기존에 setInterval을 사용했던 이유는 동일한 시간 간격마다 createdAt state를 업데이트하고 싶어서 사용했음. 그런데 useEffect의 의존성 배열에 createdAt이 있고, 클린업 함수로 createdAt이 업데이트 될 때 기존 setInterval 타이머를 취소하는 형태. 즉 동일한 시간 간격마다 반복하는게 setInterval인건데, useEffect의 클린업 함수로 인해 그 기능의 특징이 없는 상태.
어쨌든 createdAt이 업데이트 되면 useEffect의 콜백함수가 실행되며 댓글 작성이 언제 전에 일어났는지 제대로 표시는 되나, setInterval을 사용하는 의미가 별로 없음.
리팩토링
setTimeout으로 변경. setTimeout으로 변경하니 기존과 동일하게 댓글 작성이 언제 전에 일어났는지 제대로 표시됨.
무엇을 위해 리팩토링 하나요?
기존 코드
https://github.com/nailedReact/bokgungom-market/blob/3badd685c41945ae42fb596fe3effdbe1b135273/my-app/src/components/commentItem/CommentItem.jsx#L43-L64
기존에 setInterval을 사용했던 이유는 동일한 시간 간격마다 createdAt state를 업데이트하고 싶어서 사용했음. 그런데 useEffect의 의존성 배열에 createdAt이 있고, 클린업 함수로 createdAt이 업데이트 될 때 기존 setInterval 타이머를 취소하는 형태. 즉 동일한 시간 간격마다 반복하는게 setInterval인건데, useEffect의 클린업 함수로 인해 그 기능의 특징이 없는 상태. 어쨌든 createdAt이 업데이트 되면 useEffect의 콜백함수가 실행되며 댓글 작성이 언제 전에 일어났는지 제대로 표시는 되나, setInterval을 사용하는 의미가 별로 없음.
리팩토링
setTimeout으로 변경. setTimeout으로 변경하니 기존과 동일하게 댓글 작성이 언제 전에 일어났는지 제대로 표시됨.