[트러블슈팅] 컴포넌트 요소 언마운트 이벤트 - 아리아

 

💣 문제 발생

 

강사 페이지 배너 이미지의 슬라이드 애니메이션을 일반적으로 사용되는 옆으로 넘기는 효과가 아닌 서서히 fade-out 되며, 다음 이미지가 fade-in 되는 방식을 사용하기로 결정.

 

처음엔 이미지들을 동일한 div요소 안에 모두 넣어 visibility속성을 hidden으로 맞추고 state값에 따라 이미지가 나타나도록 설정했다.

 

그렇게 호기롭게 나는 하나의 state값에 현재 나타나야하는 이미지의 정보를 넣어주며, 이 상태값에 해당하는 이미지만 fade-in애니메이션을 주고 나머지 이미지를 fade-out 애니메이션을 주어 완벽하게 구현하나 싶었는데...

 

엥?! 이렇게 하니 이미지가 나타날땐 부드럽게 fade-in이 되었지만 이미지가 사라지는 fade-out 효과는 정상적으로 작동하지 않고 갑작스럽게 사라지는 문제가 발생해버리네??

 

 

 

🎯 개선 방향

 

원인은 바로 상태값에 따라 조건부 렌더링이 일어나는 상황에서 렌더링이 아주 짧은 시간에 일어나는 것에 있었다!

 

한마디로 fade-out 애니메이션을 미처 보여주기도 전에 상태값에 따른 조건에 의해 컴포넌트가 화면에서 사라지는 것이었다.

 

그렇다면 어떻게 해결하면 좋을까?

 

내가 내린 결론은 이것을 하나의 상태값이 아니라 두 개의 상태값에서 관리하는 방식을 사용하자였다.

 

 

 

✅ 개선 결과

 

현재 등장해야하는 이미지와 이전에 등장했던 이미지를 담아 관리하는 state를 만들어 계획한 대로 이미지들을 useEffect()와 setTimeout() 을 이용해 fade-in, fade-out 효과를 나눠서 보이도록 설정했더니 원하는 형태로 잘 구동하는 것을 확인하였다.

 

이렇게 하니 마지막에서 처음으로 다시 넘어가는 효과도 자연스럽게 잘 이루어졌다.

const [slideCurrent, setSlideCurrent] = useState<number>(0); // 현재 이미지
const [prevCurrent, setPrevCurrent] = useState<number | undefined>(); // 이전 이미지

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSlideCurrent((prevSlideCurrent) => (prevSlideCurrent + 1) % (NewMentorListData?.length));
      setPrevCurrent(slideCurrent);
    }, 5000);

    return () => {
      clearInterval(intervalId);
    };
  }, [slideCurrent]);

 

 

 

아쉬웠던 점

 

이러한 방식 말고도 fade-out을 구현할 수 있는 방법에는 frame-motion이라는 라이브러리도 있는데 라이브러리 활용을 너무 못한 것 같아 아쉬움이 남는다.

다음 번에는 여러가지 라이브러리를 활용해 볼 생각이다.