Written by Parkdev
on January 21, 2024

React Animation 다뤄보기

애니메이션 만드는 간단한 방법

애니메이션 동작 전 className을 만든다
애니메이션 동작 후 className을 만든다
classname에 transition 속성 추가 한다
원하는 컴포넌트에 2번 className 부착 하면 끝!

간단한 전환 애니메이션을 구현해보자

동작전 className만들기

.start {
  opacity: 0;
}

애니메이션 동작 후 className을 만든다
classname에 transition 속성 추가 한다

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

컴포넌트에 2번 className 부착

div className='start end'>

그런데 문제가 있다.

우리가 구현해야되는것은 start클래스로 숨겨져 있다가 end클레스를 통해 나타나야하는데, 적용이안된다
이를 위해선 end클레스를 클릭시 나타나게 해야한다

// 클릭할때마다 실행해야하므로 useEffect를 사용해보자
 useEffect(() => {
    setFade('end')

    return (()=>{
      setFade('')
    })
  }, [tab])

그런데 실행 해보면 첫 랜더링일때를 제외하고 작동이안된다.
이는 Automatic batching이라는 기능 때문이다.

Automatic batching이란 리엑트 18버전부터 지원하는 기능으로 가까이에 있는 state변경함수는 각각 값이 변경 되더라도 재 랜더링이 바로되지않고 마지막 결과만 재랜더링 되게된다. 즉 딱 한번 재랜더링 된다. 이때문에 타이밍을 어긋나게 만들어 각각 재랜더링을 해주기 위해 주기위해 setTimeout을 써야한다.

재랜더링에 관련된 문제이므로 첫 랜더링에서는 Timeout없이 정상적으로 실행된다.

// 클릭할때마다 실행해야하므로 useEffect를 사용해보자
 useEffect(() => {
     // 2. end를 추가하는데, automatic baching을 막기위해 setTimeout을 사용해야한다.
    let a = setTimeout(()=>{ setFade('end') }, 10)

    return (()=>{
        clearTimeout(a)
      // 1. fade는 비워져있어야하기때문에 우선 비운다음
      setFade('')
    })
  }, [tab])

짤팁

className에 변수를 넣고 싶을때 방법 2가지

1. className = {'start '+ 변수명}
2. className = {`start ${변수명}`} // 백틱 문법을 사용해도된다.

← → Top