[코딩애플;React]탭 UI만들기

1.탭 디자인 html,css로 만들기 (리액트 부트스트랩)

      <Nav variant="tabs"  defaultActiveKey="link0">

      <Nav.Item>

        <Nav.Link eventKey="link0">버튼0</Nav.Link>

      </Nav.Item>

      <Nav.Item>

        <Nav.Link eventKey="link1">버튼1</Nav.Link>

      </Nav.Item>

      <Nav.Item>

        <Nav.Link eventKey="link2">버튼2</Nav.Link>

      </Nav.Item>

  </Nav>

  <div>내용0</div>

  <div>내용1</div>

  <div>내용2</div>

 

defaultActiveKey는 페이드 로드 시 어떤 버튼에 눌린 효과를 줄지 결정하는 부분.

 

2.UI상태를 저장할 state만들기

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

 

 

3.state에 따라서 어떻게 보일지 만들어주기.

  //if문 이용하기 : if문 작성하려면 함수 컴포넌트처럼 밖에다가 작성해주면 됨.

  function TabContent({탭}){

        if(탭 == 0){

       return <div>내용0</div>

     

      }else if(탭 == 1){

       return <div>내용1</div>

      }else if(탭 == 2){

       return <div>내용2</div>

      }

   

  }

  //배열 이용하기

  function TabContent({탭}){

    return([<div>내용0</div>,<div>내용1</div>,<div>내용2</div>][탭])

  }

 

*props를 쉽게 쓰고 싶다면, 원래 props로 매개변수를 주던 곳에 props이름을 그대로 적고 사용.

 

4. 탭 누를 때마다 state변경되도록 작성해주기

  <Nav variant="tabs"  defaultActiveKey="link0">

            <Nav.Item>

              <Nav.Link eventKey="link0" onClick={()=>{탭변경(0)}}>버튼0</Nav.Link>

            </Nav.Item>

            <Nav.Item>

              <Nav.Link eventKey="link1" onClick={()=>{탭변경(1)}}>버튼1</Nav.Link>

            </Nav.Item>

            <Nav.Item>

              <Nav.Link eventKey="link2" onClick={()=>{탭변경(2)}}>버튼2</Nav.Link>

            </Nav.Item>

         </Nav>

        <TabContent 탭={탭}/>