레이아웃에 애니메이션을 적용시킨다.
사용
< layout-header.tsx >
import { CSSTransition } from "react-transition-group";
const LayoutHeader = () => {
const [diaryDropdown, setDiaryDropdown] = useState<boolean>(false);
const toggleDiary = () => {
setDiaryDropdown((prev) => !prev);
};
return (
<header className={styles.header}>
...
<CSSTransition
in={diaryDropdown} // 켜지는 조건
timeout={200}
classNames={"slide-top-to-bottom"}
mountOnEnter // Mount 될때만 켜지도록
unmountOnExit // unMount되면 없어지도록
>
<ul className={styles.dropdown}>
<li>
...
</CSSTransition>
< index.scss >
// 애니메이션 스타일링
.slide-top-to-bottom-enter {
transform: scale(1, 0) translate(0, -150%);
}
.slide-top-to-bottom-enter-active {
transform: scale(1, 1);
transition: all 200ms ease-out;
}
.slide-top-to-bottom-exit-active {
transform: scale(1, 0) translate(0, -150%);
transition: all 200ms ease-out;
}
모듈 css가 아니라, 글로벌 css 로 스타일링을 적용한 이유
React-Transition-Group 의 사용에는
classNames="animation"
을 한다면 React-Transition-Group 은 자동적으로
animation-enter
animation-enter-active
animation-exit
animation-exit-active
을 만들어, 애니메이션을 사용할 수 있게 만들어준다.
문제는
React-Transition-Group 으로 모듈CSS 를 적용하고 싶지만 뭘 해도 적용되지않는다.
그에 따라, 글로벌 CSS 로 적용시켜, 사용하도록 했다.
https://dive-into-frontend.tistory.com/111
3. React Transition Group 으로, 자체 애니메이션 컴포넌트 만들기
React Transition Group 의 두번째 기능으로 CSSTransition 이 존재한다. CSSTransition 은 Transition 과는 달리, state 를 주어주지 않고, classNames 를 지정하면 자동으로 className 이 state 에 따라 달라진다. 혹은, class
dive-into-frontend.tistory.com
추가사항
< layout-header.tsx >
import { CSSTransition } from "react-transition-group";
<CSSTransition in={diaryDropdown} ... >
...
</CSSTransition>
해당 코드처럼, nodeRef 없이 사용하면, 아래의 오류가 발생한다.
엄격모드에서, findDomNode 는 생명주기의 악영향을 끼칠 수 있으므로, 삭제되었다는 말이다
사실 공식 DOCS 에서도
이처럼 useRef 를 사용하여, nodeRef 를 사용하기를 권장한다.
< layout-header.tsx >
import { CSSTransition } from "react-transition-group";
import { useState, useRef } from "react";
...
const LayoutHeader = () => {
const nodeRef = useRef(null);
<CSSTransition in={diaryDropdown} nodeRef={nodeRef}... >
...
</CSSTransition>
이렇게 변경하면, 오류가 나오지 않는다.
'메인-프로젝트 > MERN - 다이어리 프로젝트' 카테고리의 다른 글
5.[클라이언트] - WEB SPEECH API 기반, 음성 인식 라이브러리 사용하기 (0) | 2023.02.21 |
---|---|
4.[클라이언트] 캘린더 라이브러리, 풀 캘린더 사용하기 [ Fullcalendar ] (0) | 2023.02.14 |
2.[클라이언트] 마우스를 올릴 때 마다, 움직이는 버튼 [ animated.css ] (0) | 2023.02.14 |
1. 초기 설계 (0) | 2023.02.13 |
0. 프로젝트의 목적 (0) | 2023.02.13 |
댓글