React - 컴포넌트 전환 애니메이션 주는 법 (transition)

• 애니메이션 만들기

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

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

(App.css)

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

• css 파일에 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1이 되는 className 만들기

🖤 3. transition 추가하기

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

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

function TabContent(props){

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

🖤 4. 원할 때 end 부착하기

• "버튼을 누를때마다 end를 부착해주세요~" 라고 코드를 짜면 된다.
• 버튼이 3개라 코드를 3번 짜야하기 때문에 useEffect 를 활용해야한다.
• useEffect : 특정 state 혹은 props 가 변할 때마다 코드실행이 가능하다.

function TabContent(props){

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

  useEffect(()=>{
    setFade('end')
  }, props.tab)

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

• 탭이 변할 때 end를 붙이고 싶으면 ⭐동적 UI 만드는 방법을 떠올리면 된다!! ( 또 나왔당..)
• fade라는 state를 만든 후
  state에 따라서 className이 어떻게 보일지 작성하고
  원할 때 fade를 변경하기.

🖤 작동이 되지 않는 이유

• end라는 클래스명을 부착하는게 맞지만 떼었다가 붙여야 애니메이션이 보인다.

function TabContent(props){

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

  useEffect(()=>{
    setTimeout(()=>{setFade('end')}, 100)
  return ()=>{
    setFade('')
  }
  }, props.tab)

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

• clean up function 안에 fade라는 state를 공백으로 바꾸라고 했기 때문에 useEffect 실행 전엔 'end'가 '' 로 바뀐다.

🤍 Q. setTimeout 쓰는 이유??

• 리액트 18버전 이상부터는 automatic batch 라는 기능이 생겼기 때문이다.
• state 변경함수들이 연달아서 여러개 처리되어야 한다면
  state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링 된다.
• 그래서 'end'로 변경되는거랑 '' 이걸로 변경되는 거랑 시간차를 둔 것이다.