transition으로 애니메이션 주기

애니메이션 만들려면?

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

1. 애니메이션 동작 전 / 2. 애니메이션 동작 후 className 만들기

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

• css파일에서 추가
• 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1이 되도록 설정

3. transition 추가

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

• transition은 '해당 속성이 변할 때 서서히 변경해주세요' 라는 뜻
• 원하는 <div> 요소에 start 넣어두고  end를 탈부착할 때 마다 fade in

function TabContent({탭}){

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

• end라는 className 떼었다가 붙여보면 진짜 애니메이션 동작

4. 원할 때 end 부착

function TabContent({탭}){

  let [fade, setFade] = useState('')

  useEffect(()=>{
    setFade('end')
  }, [탭])

  return (
    <div className={'start ' + fade}>
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

• 버튼을 누를 때마다 end를 부착해달라는 의미로 useEffect를 사용
  • 특정 state 아니면 props가 변할 때마다 코드실행이 가능
  • 탭이라는 state가 변할 때 end를 저기 부착해주세요. 라는 뜻으로 사용 가능
• 탭이라는게 변할 때 end를 저기 부착하고 싶으면 동적인 UI 만드는 법 떠올리기
  1. fade라는 state 하나 만들기
  2. state에 따라서 className이 어떻게 보일지 작성
  3. 원할 때 fade를 변경
• 하지만 이러면 의도와 다르게 동작하지 않는다.
  => end라는 클래스명을 떼었다가 붙여야 애니메이션이 실행이 되지만 지금은 그냥 바로 end라는 클래스명이 바로 부착된다.

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>내용2</div>][탭] }
    </div>
  )
}

• 이렇게 setTimeout을 사용하여 떼었다가 부착하도록 코드 작성
  • 리액트 18 버전 이상부터는 automatic batch 라는 기능이 생김
  • state 변경 함수들이 연달아서 여러개 처리되어야한다면 state 변경함수를 다 처리하고 마지막에 한번만 재렌더링된다.
  • 따라서 'end'로 변경하는거랑 ' ' 이걸로 변경하는 거랑 약간 시간차를 뒀다.
• 클린업 함수 안에 fade라는 state를 공백으로 바꾸라고 했으니 useEffect 실행 전에 'end'가 ' ' 이걸로 바뀐다.

응용 : 컴포넌트 로드 시 투명도가 0에서 1로 서서히 증가하는 애니메이션?

function Detail(props){

  let [fade2, setFade2] = useState('')

  useEffect(()=>{
    setFade2('end')
    return ()=>{
      setFade2('')
    }
  },[])

    return (
      <div className={'container start ' + fade2}>
      (하단 html 생략) 
    )
}

1. start라는 className 만들고 부착
2. end라는 className 만들기
3. transition 추가 / 이제 end를 탈부착하면 애니메이션 동작
4. 원할 때 end를 떼었다가 붙이면 됨