[React] - 탭 UI 생성하기

오늘은 쇼핑몰 같은 웹페이지에서 쉽게 볼 수 있는 탭 UI를 만들어보자.

먼저 편리하게 React-bootstrap에서 이미 완성된 탭 UI를 가져온다. (import 필수!)

이 코드의 eventKey 속성은 버튼마다 마음대로 작명하면 되고, efaultActiveKey는 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분이라고 한다.

/* Detail.js */
<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> 

내가 만들고자 하는 탭 UI는 버튼0을 누르면 내용0이, 버튼1을 누르면 내용1이, 버튼2를 누르면 내용2가 나오는 모양새이다. 따라서 state가 매번 바뀌기 때문에 먼저 현재 상태를 저장할 state가 필요하다.

function DetailPage() {
  let [tab, setTab] = useState();
  ...
}

이제 state가 0,1,2면 내용 0,1,2를 보여주는 코드를 짜보자. 삼항연산자를 사용할 수도 있지만 그렇게 되면 코드가 지저분해보이므로 따로 컴포넌트를 만들어 If문을 사용해보자. 이때 Tab 컴포넌트에서는 props로 tab을 받아와야 한다!

function DetailPage() {
  let [tab, setTab] = useState();
  return (
    <div>
    	<Tab tab={tab} />
    </div>
  )
}

function Tab(props) {
  if (props.tab == 0) {
   return <div>내용0</div>
  }
  if (props.tab == 1) {
    return <div>내용1</div>
  }
  if (props.tab == 2) {
    return <div>내용2</div>
  }
}
  

만약 if문을 쓰지 않고 더 짧은 코드로 나타내고 싶으면 아래처럼 하면 된다. props.tab이 0이면 array의 0번째 자료가 반환된다.

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

만약 props를 쓰고 싶지 않다면 아래처럼 하면 된다. 자식컴포넌트에서 파라미터를 props 하나만 작명하는 게 아니라, {state1이름, state2이름 ... } 이런 식으로 작성하면 props를 쓰지 않아도 된다.

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

이제 state가 0,1,2로 변경될 때마다 서로 다른 내용이 나오게 되었다. 그렇다면 이번에는 탭에 있는 버튼을 누르면 해당 내용이 보이도록 하려면 어떻게 해야 할까? 정답은 바로바로 맨 처음에 생성했던 탭에 onClick 속성을 추가해주면 된다.

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link onClick={()=>{setTab(0) }} eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ setTab(1) }} eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ setTab(2) }} eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>

완성!