Coding Apple, React 강좌 내용 정리.16 - Tab UI , animation

React 강의

Tab UI (React-Bootstrap 활용)

간단한 애니메이션 (해당 tab의 content변경시 서서히 나타나게)

개요

UI상태 (여기선 tab) 를 true/false state로 저장해둠

선택한 tab에 따라 해당 content (<div> , </div> ) 의 내용을 나타나게 한다.

이왕 서서히 나타나게 하는 간단한 애니메이션을 추가한다.

 

   Tab 만들기   

React 부트스트랩에서 찾아 복사해서 붙여넣기로 (링크)

{/* defaultActiveKey : 기본적으로 눌러진 버튼의 eventKey 
    부트스트랩의 mt-5 이용
*/}
<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
  <Nav.Item>
    {/* 버튼들마다 유니크한 eventKey 부여하기 */}
    <Nav.Link eventKey="link-0">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Option 2</Nav.Link>
  </Nav.Item>
</Nav>

누른탭의 정보, 번호를 저장할 state 만들기

let [누른탭, 누른탭변경] = useState(0)  // 누른버튼 번호

TabContent 를 컴포넌트로 만들기

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

< component에서 if , else가 가능하다?>

   애니메이션 추가   

1. 애니메이션주는 class를 미리 만들어두고

   (content를 서서히 나타나게 하는 효과)

2. 컴포넌트 등장/업데이트될때 className에 부착한다.

 

아니면 라이브러리를 사용하기로 한다.

설치 : npm install react-transition-group

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

 

애니메이션필요한 곳에 CSSTransition 태그로 감싸기

in, classNames, timeout 넣기

<CSSTransition in={true} classNames="clsName" timeout={500}>
  {/* 탭 내용이 있는 <div> 만들기 */}
  <TabContent 누른탭={누른탭} />
</CSSTransition>

in : 애니메이션 켜는 스위치 (true: 동작)

class로 애니메이션 넣기 (css로 적용)

// 애니메이션 시작때 css
.clsName-enter{
    opacity: 0;
}
// 애니메이션 동작 때 적용할 css
.clsName-enter-active{
    opacity: 1;
    transition: all 500ms;
}