사건의 발단 : 커스텀 캐러셀을 만듦.
문제점 : 캐러셀의 페이지 및 데이터는 redux로 관리되고 있었음. 7초마다 자동으로 넘어가는 Animation을 setInterval을 App.tsx에서 선언하면 전역으로 re-render 이슈 존재.
- 해결책 : 그럼 해당 컴포넌트에서만 선언하면 되겠다.
문제점 : 해당 페이지에 접근해서 컴포넌트가 렌더링 될 때마다, setInterval 누적
- 해결책 : 공부해보니 interval은 window 객체에 저장되고 clearInterval({id})로 삭제할 수 있다.
문제점 : 근데 id를 어떻게 관리하지?
- 해결책 : 재사용성을 고려한 커스텀훅 작성 등 이런저런 고민을 하다 4시간만에 느낀 것. "Simple is Best"
훅의 작성해 재사용성을 고려하는 것도 좋지만, Carousel Animation에 대한 책임은 Carousel 컴포넌트가 지는 것이 맞아보였다. 해당 프로젝트에선 setInterval을 추가적으로 사용할 계획도 없으며 코드도 짧고 직관적이기 때문에 Carousel 내부에서 아래처럼 작성하는 것으로 결론을 냈다.
useEffect(() => {
const intervalRef = setInterval(() => dispatch(next()), 7000);
return () => {
clearInterval(intervalRef);
};
}, []);
코드는 너무나도 간단하다.
내 실력이 부족했던 것이니, 맛있게 주워먹자. 뇸뇸
