[React]탭메뉴 만들기

[React]탭메뉴 만들기

1.UI 만들기

리액트 부트스트랩 사이트의 탭메뉴 UI를 가져온다.

Detail.js

import {Nav} from 'react-bootstrap';

        <Nav className="mt-5 mb-3" variant="tabs" defaultActiveKey="link-0">
          <Nav.Item>
            <Nav.Link eventKey="link-0">Tab 1</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-1">Tab 2</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-2">Tab 3</Nav.Link>
          </Nav.Item>
        </Nav>

2.state 만들기

몇 번째 버튼을 클릭했는지 저장할 state 데이터를 만든다.

Detail.js

let [클릭된탭, 클릭된탭변경] = useState(0);

        <Nav className="mt-5 mb-3" variant="tabs" defaultActiveKey="link-0">
          <Nav.Item>
            <Nav.Link eventKey="link-0" onClick={()=>{클릭된탭변경(0)}}>Tab 1</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-1" onClick={()=>{클릭된탭변경(1)}}>Tab 2</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-2" onClick={()=>{클릭된탭변경(2)}}>Tab 3</Nav.Link>
          </Nav.Item>
        </Nav>

3.컴포넌트 만들기

Detail 컴포넌트에 선언된 클릭된탭 state를 TabContent에 props로 전송하여 클릭된탭 값에 따라 각각 다른 UI를 보여준다.

Detail.js

        <TabContent 클릭된탭={클릭된탭}/>

  function TabContent(props){
    if(props.클릭된탭 === 0){
      return <div>Tab 1 내용입니다.</div>
    }else if(props.클릭된탭 === 1) {
      return <div>Tab 2 내용입니다.</div>
    }else if(props.클릭된탭 === 2){
      return <div>Tab 3 내용입니다.</div>
    }
  }

 

결과 화면

[React]애니메이션 넣기(react-transition-group)애니메이션을 넣을 때 class로 제작하여 컴포넌트 등장 혹은 업데이트 될 때 className을 추가하는 방식으로 넣을 수도 있지만 react-transition-group이라는 라이브러리를 사용하면 transition 속성을 더 편리하게 사용할 수 있다....