[React] 전환 애니메이션 주기

컴포넌트를 로드할때 투명도가 0에서 1로 증가하는 애니메이션을 줘보자

 

1. 먼저 css 파일에 동작 전 스타일을 담을 className을 만든다
2. 그리고                동작 후 스타일을 담을 className을 만든다
3. transition 속성을 추가한다
4. 원하는 곳에서 사용한다.

---

먼저 css 파일에 className을 작성한다.

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

transition은 해당 속성이 변할때 서서히 변경해달라- 라는 의미다.

 

그리고 다음은 컴포넌트에 적용시킨 모습이다.

function TabContent({ tab }) {
  //tab state 가 변할 때 end를  start 옆에 추가
  let [fade, setFade] = useState("");
  useEffect(() => {
    setTimeout(() => {
      setFade("end");
    }, 100);

    return () => {
      //useEffect 전에 실행

      setFade("");
    };
  }, [tab]);
  return (
    <div className={"start " + fade}>
      {
        [
          <div>내용0</div>,
          <div>내용1</div>,
          <div>내용2</div>,
          <div>내용3</div>,
        ][tab]
      }
    </div>
  );
}

useEffect 쓸때에 return 쓰면

그 안에 있는 코드는 useEffect 가 실행되기전에 실행된다.

 

그래서 먼저 fade라는 state를 ' '  로 했다가 'end' 라고 바꾸어 

className에 start 옆에 end가 붙도록 한다.

 

* 왜 시간이 지난 후에 setFade를 부를까?

리액트 18버전 이상부터는 automatic batch 라는 게 생겼다

state 변경함수가 여러개 처리되어야 하면 다 처리하고 마지막에 한번만 재랜더링 된다.

그래서 일부러 시간차를 둔거다.(flushSync() 라는거 써도 된다고함)