210714 tab 만들기 & 애니메이션

Tab 만들기

몇번째 버튼을 눌렀는지 state로 저장하고, state에 따라 UI를 보이게했다가 안보이게 하면 됨.

그냥 <button>태그로 만들어진 버튼이 아니라 부트스트랩을 이용하도록 하자
https://react-bootstrap.netlify.app/components/navs/#base-nav
1. 여기서 Tab 찾아서 button 자리에 코드 복붙

<Nav variant="tabs" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Option 2</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="disabled" disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

그 뒤에

• 클래스명 "mt-5" 이용해서 margin-top을 5로 주고
• href 속성 삭제
• 각자 다른 eventKey 설정
• defaultActiveKey 설정(기본적으로 눌러진 버튼 설정)

      <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>

2. 누른 state 값을 저장할 변수를 만든다

let[tab, setTab] = useState(0);

3. 0번째 탭을 누르면 state를 0으로, 1번째 탭을 누르면 state를 1로 만들도록 작성한다.

      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ setTab(0) }}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{ setTab(1) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>

4. 삼항연산자는 조건 여러개 달 수 없기 때문에 다른 방법을 사용해야한다. TabContent 컴포넌트를 작성하는 방식으로!
   이때, 상위 컴포넌트(Detail)에서 정의한 tab state를 사용해야 하기 때문에 props를 사용한다.

function TabContent(props){
  if(props.tab===0){
    return <div>0번째 내용입니다.</div>
  }
  if(props.tab===1){
    return <div>1번째 내용입니다.</div>
  }
}

      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ setTab(0) }}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{ setTab(1) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>

      <TabContent tab={tab}></TabContent>

애니메이션 추가하기

미리 애니메이션 클래스를 제작한 다음, 컴포넌트 등장/업데이트될 때 클래스에 붙을 수 있도록 하면 된다. -귀찮으면 라이브러리 쓰기-

npm install react-transition-group
yarn add react-transition-group

숨쉬듯 import하기

import { CSSTransition } from 'react-transition-group';

1. <CSSTransition> 으로 애니메이션 필요한 곳 감싸고 in, classNames, timeout 설정

      <CSSTransition in={true} classNames="wow" timeout={500}>
        <TabContent tab={tab}></TabContent>
      </CSSTransition>

in: true일 때 애니메이션을 적용해줌
className: 클래스명, 애니메이션 디자인에 활용
timeout: 작동시간

2. css로 애니메이션 디자인하기
   opacity를 0~1로 변경해서 서서히 등장하게 해보자

.wow-enter{
//컴포넌트 등장 시작시 적용할 css
  opacity:0;
}
.wow-enter-active{
//컴포넌트 등장 중일시 적용할 css
  opacity:1;
  transition: all 500ms;  //0.5초안에 서서히 변하게 해주세요

3. 평소에는 in을 false로 해뒀다가 원할 때 true로 바꿔주기

• 우선 state로 만들어 조작하기 쉽게한다.

let[tabSwitch, setTabSwitch] = useState(false);

• tab의 버튼을 누르면 스위치가 false로 바뀌고, tab 컴포넌트가 로드될 때 스위치가 true로 바뀌게 한다 (useEffect 이용)

      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ setTabSwitch(false); setTab(0) }}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{ setTabSwitch(false); setTab(1) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
      
      
      
      function TabContent(props){
  useEffect(()=>{
    props.setTabSwitch(true);  //tab 컴포넌트가 로드 될 때 true
  })
  if(props.tab===0){
    return <div>0번째 내용입니다.</div>
  }
  if(props.tab===1){
    return <div>1번째 내용입니다.</div>
  }
}

👍완성!