[React] 탭 UI 만들기

import Nav from "react-bootstrap/Nav";




function Detail(props) {

		...

  let [tab, setTab] = useState(0);
  
        ...
      
      
      <Nav fill variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(0);
            }}
            eventKey="link-0"
          >
            상품 상세
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(1);
            }}
            eventKey="link-1"
          >
            구매 안내
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(2);
            }}
            eventKey="link-2"
          >
            상품 후기
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(3);
            }}
            eventKey="link-3"
          >
            상품 문의{" "}
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent tab={tab} />
    </div>
  );
}

function TabContent({ tab }) {
  if (tab == 0) {
    return <div>content 0</div>;
  } else if (tab == 1) {
    return <div>content 1</div>;
  } else if (tab == 2) {
    return <div>content 2</div>;
  } else if (tab == 3) {
    return <div>content 3</div>;
  }
}

react bootstrap 에서 가져왔고

tab 이라는 state 를 만들어줬다.

그리고 navbar 의 버튼을 누를때마다 tab 의 값이 달라지도록 했다.

 

탭에 따라서 내용물이 달라지게 하기 위해 TabContent 라는 컴포넌트를 만들었다.

이 컴포넌트는 tab을 props 로 받아서 

tab 에 따라 다른 내용을 return 해준다..

 

 

 

여기서 props 사용 팁!

원래는

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][props.탭]
}

이렇게 파라미터에 props 라고 적고 

사용할 때에는 props.state이름 이렇게 쓰던걸

 

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

이 문법으로 쓸 수 도있다.

내기준 훨씬 나을듯!

props 대신 state 이름을 { } 로 감싸고

직접 사용할 때에는 그냥 state 이름을 쓰면 된다.