애니메이션 효과 주기

컴포넌트들이 생성되고 삭제될때 특정 애니메이션을 주고 싶을 때 어떻게 하는지 알아보도록 하겠다.

애니메이션을 만드는 방법

1. 애니메이션 동작 전 스타일을 담을 className 만들기
2. 애니메이션 동작 후 스타일을 담을 className 만들기
3. transition 속성도 추가
4. 원할 때 2번 탈부착

시작시엔 투명도가 0 끝날시엔
투명도가 1인 애니메이션을 만들어 볼 것이다.

• step1 className 만들기

.start{
  opacity : 0;
}
.end{
  opacity : 1;
}

• step2 transition 추가

.start{
  opacity : 0;
}
.end{
  opacity : 1;
  transition : opacity 0.5s;
}

이제 원한느 div 요소에 start를 달아두고 end를 탈부착 할 때마다 원하는 애니메이션 효과를 줄 수 있을 것이다.

확인을 해보자면

function TabContent(props){
  
  return (
    <div className = "start end">
      { [<div>내용0</div>,
         <div>내용1</div>
         ][props.탭] }
    </div>
  )
}

end를 붙이면 애니메이션이 작동하는 것을 알 수 있다.

• step3 원할 때 end 부착

  "버튼을 누를 때마다 end를 부착해주세요~" 라는 기능을
  만들어 보도록하겠다.

function TabContent({탭}){
  let [fade, setFade] = useState('');
  
  useEffect(()=>{
    setFade('end')
  },[탭])
  
  return (
    <div className={'start ' + fade}>
      {[<div>내용0</div>,
        <div>내용1</div>
        ][탭]}
    </div>
 )
}

이렇게 해주면 탭이라는 state가 변할 때 마다 fade라는 state가 'end'로 변하고 className='start end'로 바뀌게 된다.

※여기서 TabContent 안이 props에서 탭으로,
return문 안에서도 props.탭에서 탭으로 바뀐 이유

자식 컴포넌트에서 {'이름'} 으로 작명을 한다면
props.이름 이런식으로 안해줘도 된다.

• step4 타이머 설정

function TabContent({탭}){
  let [fade, setFade] = useState('');
  
  useEffect(()=>{
    setTimeout(()=>{setFade('end')},100)
  return()=>{
    setFade('')
  }
  },[탭])
  
  return (
    <div className={'start ' + fade}>
      {[<div>내용0</div>,
        <div>내용1</div>
        ][탭]}
    </div>
 )
}

clean up function 안에 fade라는 state를 공백으로 바꾸라는 코드가 있으니 useEffect실행 전에 먼저 공란으로 바뀔 것이다.

• setTimeout을 쓰는 이유
  state변경 함수들이 연달아서 여러개 처리되어야 하면
  state변경함수를 다 처리하고 마지막에 한 번만 재렌더링된다.
  그래서 'end'로 변경하는 것과 ''로 변경하는 것에 약간의 시간차를 준 것이다.