tab 기능을 만들것이다!!!! 걍 부트스트랩 이용 복붙
작고 귀여운 내 tab
부트스트랩 문법으로 버튼들마다 유니크한 eventKey를 부여 할 것이다.
<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
<Nav.Item>
<Nav.Link eventKey="link-0">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Option 2</Nav.Link>
</Nav.Item>
</Nav>
defaultActiveKey="link-0"
속성은 eventKey가 link-0인 버튼이 눌린것처럼 디폴트 값을 부여 하는것
let [tab, setTab] = useState(0);
몇번째 버튼을 눌렀는지 값을 저장할 state를 선언했다
.
.
<Nav.Link eventKey="link-0" onClick={() => setTab(0)}>
.
.
state 변경해주기, state가 0이면 0번째 div, 1이면 1번째 div를 보여주면 될것이다, 아쉽게 삼항연산자는 한가지 경우의 수만 컨트롤 하기 때문에 진정한 if문을 써야한다.
<TabContent tab={tab} />
.
.
function TabContent({ tab }) {
if (tab === 0) {
return <div>0번째 내용</div>;
} else if (tab === 1) {
return <div>1번째 내용</div>;
}
}
하위 컴포넌트이기때문에 props 전달 받는것도 잊지말기
탭의 내용이 잘 리턴된다!!!
애니메이션 css를 적용하고 싶으면 간단하게 적용 가능한 라이브러리가 있다
yarn add react-transition-group 설치 ㄱㄱ
설치가 완료되었다면 import 하자
import { CSSTransition } from "react-transition-group";
1. 애니메이션 필요한 곳에다 <CSStransition>
으로 감싸주기
<CSSTransition>
<TabContent tab={tab} />
</CSSTransition>
2. 필요한 옵션 3개 (in, classNames, timeout 넣기)
<CSSTransition in={true} classNames="wow" timeout={500}>
<TabContent tab={tab} />
</CSSTransition>
in은 스위치, true일때 애니메이션 적용해줌
timeout은 작동시간이라 보면된다
/*Detail.scss*/
.wow-enter{
opacity: 0;
}
.wow-enter-active{
opacity: 1;
transition: all 500ms;
}
방금 지정한 class이름으로 css를 짜주면 된다.
이름-enter : 애니메이션 시작때 적용할 css
이름-enter-active : 애니메이션 동작할때 적용할 css
적용한 css에 의해 투명도가 0에서 1까지 0.5초에 걸쳐 바뀔것!!
3. 원할 때 스위치 켜기 (state로 저장해서 쓰자)
let [on, setOn]=useState(false);
.
.
.
<CSSTransition in={on} classNames="wow" timeout={500}>
state 선언해주자
function TabContent(props) {
useEffect(() => {
props.setOn(true);
});
if (props.tab === 0) {
return <div>0번째 내용</div>;
} else if (props.tab === 1) {
return <div>1번째 내용</div>;
} else if (props.tab === 2) {
return <div>2번째 내용</div>;
}
}
<Nav.Link
eventKey="link-0"
onClick={() => {
setOn(false);
setTab(0);
}}
>
Active
</Nav.Link>
tab 내용 컴포넌트가 로드될때 true로 바뀌게 useEffect() 를 써주었고, 탭의 버튼을 누르면 스위치가 false로 바뀌게 하였다
다른 자세한 react-transition-group 사용법은 구글링 해보자
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)