AOS 이벤트가 처음 렌더링 시에만 작동하는 문제

 

연습문제페이지를 북마크까지 연결하고나니 시각적인 효과를 좀 더 주고싶어졌다

간단하게 스크롤 효과를 주고싶어 AOS 스크롤 라이브러리를 사용했다.

npm i aos

 

설치해주고 버튼클릭시 문제id가 변동될때마다 효과가 새로 발생하도록 설정하였다.

import AOS from 'aos';
import 'aos/dist/aos.css'; 

const [animation, setAnimation] = useState("fade-right");

  useEffect(() => {
    AOS.init({
      duration: 1000,
    });

    AOS.refresh();
  }, [currentIdx]);


const handleNextQuestion = () => {
  if (currentIdx < randomIds.length - 1) {
    setAnimation("fade-left"); 
    setCurrentIdx(currentIdx + 1);
    setSelectedOptions([]);
    setIsChecked(false);
  }
};

const handlePreviousQuestion = () => {
  if (currentIdx > 0) {
    setAnimation("fade-right");
    setCurrentIdx(currentIdx - 1);
    setSelectedOptions([]);
    setIsChecked(false);
  }
};

return (
	 <ProblemBox data-aos={animation}>
     );

 

음..근데 안된다.

처음 렌더링했을때는 효과가 나타나는데 왜 그이후로는 안되는걸까..

refreshHard도 사용해보고 key이벤트랑 각각의 함수마다 refresh를 적용해봤지만 안된다.

콘솔을 찍어봤을때도 값은 전부 바뀌는데 내가 뭘 착각하고 있는거지

 

ProblemBox라는 하나의 컴포넌트를 가지고 효과를 주려고 해서일까?

이 컴포넌트에 key로 currentIdx를 주면 고유한 식별값을 가지게되어서 움직이지 않을까?

---

 

성공!

key가 없으니까 계속 똑같은 컴포넌트를 재사용해서 업데이트를 감지하지 못한게 맞았다.

의존성 배열만으로는렌더링을 강제하거나 고유한 컴포넌트 인스턴스를 구분할 수 없구나

의존성배열과 사이드이펙트는 다시공부하기..

오늘도 몸으로 배워간다