* 애니메이션 개발 단계
- 애니메이션 동작 전 스타일을 담아둘 className생성
- 애니메이션 동작 후 스타일을 담아둘 className생성
- transition 속성 추가
- 원할 때 2번 탈부착을 해준다.
* 애니메이션 예시 코드 (fade in 애니메이션 예시 코드)
- 애니메이션 동작 전 className 생성
- 애니메이션 동작 후 className 생성
- transition 추가
- 원할 때 fade-end 탈부착
.fade-start {
opacity : 0;
}
.fade-end {
opacity : 1;
transition : opacity 0.5s;
}
function TabContent({tab}){
return (
<div className="fade-start fade-end">
{ [<div>content0</div>, <div>conten1</div>, <div>content2</div>][tab] }
</div>
)
}
- useEffect를 활용해서 코드 구성 가능
- useEffect를 사용하면 특정 state혹은 prorps가 변할 때 마다 코드가 실행이 가능하므로 활용 가능
function TabContent({tab}){
const [tab, setTab] = useState(0);
const [fade, setFade] = useState('');
useEffect(()=>{
setTImeout(()=>{
setFade('fade-end')
},100)
return ()=>{
setFade('')
}
}, [tab])
return (
<div className={'fade-start ' + fade}>
{ [<div>content0</div>, <div>content1</div>, <div>content2</div>][tab] }
</div>
)
}
- fade라는 state를 만들고 state에 따라서 className이 어떻게 보일지 작성후 원할 때 fade를 변경
- tab이라는 state가 'fade-end'로 변하면 className="fade-end"로 변한다.
- clean up function안에 fade라는 state를 공백으로 변경하게 셋팅해두었다.
- 따라서 useEffect 실행 전엔 'fade-end'가 ' ' 이걸로 변경이 된다.
* setTimeout을 사용하는 이유
리액트 18버전 이상부터는 automatic batch라는 기능이 생겼다.
state변경함수들이 여러개 처리가 되어야 한다면
state변경함수를 다 처리하고 마지막에 한 번만 재렌더링된다.
그래서 'fade-end'로 변경하는거랑 ' ' 공백으로 변경하는거랑 약간의 시간차를 두었다.
setTimeout 말고 flushSync()를 사용해도 automatic batching를 막아준다.
'Study > React' 카테고리의 다른 글
[React_study] Redux & Redux Toolkit 셋팅 및 사용 (0) | 2022.06.12 |
---|---|
[React_study] Context API (0) | 2022.06.12 |
[React_study] if를 사용하지 않고 props를 사용하기 (0) | 2022.06.10 |
[React_study] Ajax (post, fetch) (0) | 2022.06.10 |
[React_study] Ajax (서버와 통신) (0) | 2022.06.09 |