React Tab UI,(react-transition-group)

버튼을 여러개만들어서 div를 보여줄 수 있는데 그냥 탭만들기라고 명칭,

 

쉽게말하면 그냥 버튼1,2,3 그리고 탭 1,2,3 이렇게 연결하는걸 말함

 

return (
    <div>
      <button>버튼0</button>
      <button>버튼1</button>
      <button>버튼2</button>
      <div>내용0</div>
      <div>내용1</div>
      <div>내용2</div>
    </div>
  )

이런식으로 되어있는걸 부트스트랩을 써도되고, 그냥 버튼을 사용해도됨

 

방식은 useState를 사용해 어떤 버튼을 눌렀는지 state로 저장해두고 상태에 따라 div를 조건문으로

 

보였다 안보였다 해주면됨 on/off가 아닌 버튼 숫자를 저장하면 된다.

 

 let [누른탭, 누른탭변경] = useState(0);
 
 ..........
 
  <Nav variant="tabs" className="mt-5" defaultActiveKey="link-0">
  <Nav.Item>
    <Nav.Link eventKey="link-0" onClick = {()=>{ 스위치변경(false);누른탭변경(0)} }>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1" onClick = {()=>{ 스위치변경(false);누른탭변경(1)} }>Option 2</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-2" onClick = {()=>{ 스위치변경(false);누른탭변경(2)} }>Option 3</Nav.Link>
  </Nav.Item>
</Nav>

이와같이 상단에 useState를 사용해 버튼을 저장해두고 react bootstrap에서 가져온 nav.item이다

 

defaultActivekey는 처음 어느버튼을 눌러둘껀지 설정하는거고, eventKey는 private하게 설정하면됨

 

안에 onClick이벤트로 useState변경함수를 사용해주자

 

<TabContent 누른탭 = {누른탭} 스위치변경 = {스위치변경}></TabContent>

function TabContent(props){

  useEffect(()=>{
    props.스위치변경(true)
  })

  if(props.누른탭 === 0){
    return <div>0번째</div>
  } else if(props.누른탭 === 1){
    return <div>1번째</div>
  }else if(props.누른탭 === 2){
    return <div>2번째</div>
  }
}

그리고 TabContent라고 만들어준 컴포넌트를 사용해서 if 조건문을 사용해준다.

 

크게 어려운건 없는것 같다.

 

---

애니메이션만들기

 

이부분은 그냥 CSS를 사용해도된다고한다, 그런데 라이브러리가 있는데 사용해보자

 

yarn add react-transition-group

npm install react-transition-group

import {CSSTransition} from "react-transition-group"

상단에 이와같이 import를 해온다

 

  let [누른탭, 누른탭변경] = useState(0);
  let [스위치,스위치변경] = useState(false)

그리고 탭 변경밑에 바로 스위치를 만들어준다.

 

CSS on/off스위치라고 보면된다. 그래야 작동이 제대로 되기때문

 

<CSSTransition in={스위치} classNames="wow" timeout={500}>
<TabContent 누른탭 = {누른탭} 스위치변경 = {스위치변경}></TabContent>
</CSSTransition>

function TabContent(props){

  useEffect(()=>{
    props.스위치변경(true)
  })

  if(props.누른탭 === 0){
    return <div>0번째</div>
  } else if(props.누른탭 === 1){
    return <div>1번째</div>
  }else if(props.누른탭 === 2){
    return <div>2번째</div>
  }
}

이와같이 TabContent를 <CSSTransition>으로 감싸줘서 작동시킨다.

 

in = 말그대로 스위치

classnames는 css에서 적용시킬 애니메이션 이름이다.

timeout은 작동시간이다.

 

.wow-enter{
  opacity: 0;
}
.wow-enter-active{
  opacity: 1;
  transition: all 500ms;
}

그리고 이와같이 별도로 css를 작성한다. (파일로 만들어 import)

각각의 클래스명

이름 - enter: 컴포넌트 등장시작시 적용할 css

이름 - enter-active: 컴포넌트 등장하고있을때 적용할 css

 

function TabContent(props){

  useEffect(()=>{
    props.스위치변경(true)
  })

  if(props.누른탭 === 0){
    return <div>0번째</div>
  } else if(props.누른탭 === 1){
    return <div>1번째</div>
  }else if(props.누른탭 === 2){
    return <div>2번째</div>
  }
}

이와같이 컴포넌트가 불러올대는 스위치를 true켜줘서 애니메이션을 작동하게한다.

 

그리고 상단에 버튼을 누를때는

 

<Nav.Link eventKey="link-0" onClick = {()=>{ 스위치변경(false);누른탭변경(0)} }>Active</Nav.Link>

이와같이 스위치를 false로만들고 아래 useEffect에서 켜지기때문에 애니메이션이 늘 작동하게 만들 수있다.