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

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

1. css파일에서 부착하면 애니메이션 나오는 className 하나 만든다.

(1) 애니메이션 동작 전 className만들기

→ fade-in 되는 애니메이션(투명도 0 으로 되는)

.start {
  opacity: 0; //투명도 주는 스타일
}

.start {
  scale(0);
} //여러가지 css줄 수 있음

(2) 애니메이션 동작 후 className 만들기

.end{
  opacity: 1;
}

.end{
  scale(1);
}

(3) className에 transition속성 추가

.end{
  opacity: 1;

	/*opacity가 변경될 때 0.5초에 걸쳐서 변경해주세요*/
  **transition: opacity 0.5s;** 
}

(4) 원할 때 2번 className 부착

function TabContent({탭}) {
  return (<div className="start **end**"> #end className 뗐다 부착하면 됨!
    { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
  </div>)
}

→ return 문이 길면 소괄호 붙여주자

→ 우리는 탭이라는 state가 변할 때 end라는 className을 뗐다가 부착하자!

(class 뗐다부착하는거나, state변할 때 부착하는거나 같은거)

function TabContent({탭}) {

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

  useEffect(()=>{
    //0.1초 후에 fade라는 state를 end로 바꿔주세요!
    let a = **setTimeout**(()=>{ **setFade('end')** }, 100)

    //cleanup function(useEffect이전에 실행되는 코드)
    return ()=>{
      **clearTimeout(a)** //타이머 삭제
      **setFade('')** //잠깐 뗐다가 부착해주세요
    }
  }, **[탭]**) //탭이라는 state가 변경될때마다 안의 코드 실행해줌

전체 코드

function TabContent({탭}) {

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

  useEffect(()=>{
    let a = setTimeout(()=>{ setFade('end') }, 100)
    return ()=>{
      clearTimeout(a)
      setFade('') 
    }
  }, [탭])

function TabContent({탭}) {

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

리액트의 automatic batching 기능

state 변경함수가 근처에 있으면 하나로 합쳐서 최종적으로 한 번만 state를 변경해줌

state변경함수를 쓸때마다 재렌더링을 해주는게 아니라 마지막에 재렌더링 1번 해줌

즉, setFade(’’)가 먼저 일어나고 그 다음 setFade(’end’)로 바뀌므로 setFade(’end’)만 일어나는 것 같음

→ 이 때, setTimeout()으로 시간차를 주면 공백이 생겼다가 end로 변경되므로 뗐다 부쳤다 가능

Q. Detail 페이지 로드시 투명도 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를 떼었다가 붙이면 됩니다

• Detail 컴포넌트 로드시엔 'end'를 부착해주세요
• Detail 컴포넌트 삭제시엔 'end' 떼어주세요

라고 코드짰습니다.