React, 컴포넌트 전환 애니메이션

애니메이션 만들기

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

 

1. 애니메이션 동작 전 스타일을 담을 className 만들기

.start {
  opacity : 0
}

 

2. 애니메이션 동작 후 스타일을 담을 className 만들기

.end {
  opacity : 1;
}

 

3. transition 속성도 추가

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

 

4. 원할 때 동작 후 스타일을 담을 className 탈부착

function Animation(tab){
  let [fade, setFade] = useState("");
  
  useEffect(() => {
    setTimeout(() => {
      setFade("end");
    }, 200);
    return () => {
      setFade("");
    };
  }, [tab]);

  return (
    <div className={"start " + fade}>
    </div>
  )
}

이때 땟다 붙였다 하는 것이 확실히 보여야 애니메이션이 됨

그래서 위에 예시에 setTimeout을 해서 0.2초뒤에 end가 붙도록 설정한 것

 

※ automatic batching

React 18부터 automatic batching라는 기능이 생겼음

Batching이란 React가 나은 성능을 위해 여러개의 state 업데이트를 한번의 리렌더링으로 묶어서 진행하는 것을 말함

Batching으로 작업 렌더링을 최소화하여, 애플리케이션의 성능향상을 기대할수 있지만

위에 애니메이션처럼 속성 탈부착에 시간차가 필요하다고 생각하는 등에

Batching을 원치 않을경우에는 FlushSync을 사용하거나 자신의 코드에 맞게 setTimeout을 이용하면 됨