Detail 컴포넌트에 애니메이션주기 과제 질문입니다 !

[문세웅]

function DetailPage(props) {
  let [animation, setAnimation] = useState('');

  useEffect(()=> {
    let timer2 = setTimeout(()=> {
      setAnimation('end');
   }, 100);

  return ( ) => {
    setAnimation('');
    clearTimeout(timer2);
   }
  }, [])

return(
<div className={'container start ' + animation}>
... (이하 생략)

 

코드는 위와 같습니다.

useEffect 사용할 때, dependency에 [animation] 을 추가하니까 컴포넌트가 아에 안보이는데, 개발자도구 열어보니까 뭔가 무한로딩에 빠진 것 같아요.

처음 로드될때(마운트될 때)만 실행되면 되니까, dependency값이 필요없는건 알지만 animationState를 변경하는 곳이 없는데도 문제가 되는 이유를 알 수 있을까요...?

[codingapple]

animation이 변경되면 useEffect가 실행되고 
useEffect안에 있는 코드는 animation을 변경시키고 
그럼 또 useEffect가 실행되고
무한반복인듯요

[문세웅]

아하...
강의시간에 opacity 주던 로직이랑은 다른부분이 있었네요...!
답변 감사합니다 !

[글쓴이]

글