리액트 React : 리액트에서 탭 UI 만들기

오늘은 쇼핑몰에서 흔히 볼 수 있는 탭 UI를 만들어봅시다. 

버튼 3개와 박스 3개를 미리 만들어놓고 버튼 누를 때 마다 그에 맞는 박스 보여주는게 탭 UI입니다. 

 

1. html css로 디자인 미리 완성해놓고

2. UI의 현재 상태를 저장할 state 하나 만들고

3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했습니다. 

 

1. html css로 탭 디자인 미리 완성하기

 

버튼은 react-bootstrap 사이트에서 복사해서 Detail 페이지에 넣어봤습니다. 

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

 

거기 문서 보니까 eventKey 속성은 버튼마다 맘대로 작명하면 된다고 합니다. 

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

 

2. UI의 현재 상태를 저장할 state 하나 만들기

function Detail(){
  let [탭, 탭변경] = useState(0)
  (생략)
}

 

상단에 state 하나 만들었습니다.

탭 UI의 상태는 0번 내용이 보이거나 / 1번 내용이 보이거나 / 2번 내용이 보이거나 

 

3. state에 따라서 UI가 어떻게 보일지 작성

state가 0이면 0번 내용, 1이면 1번 내용 보여주세요.

function Detail(){
  let [탭, 탭변경] = useState(0)
  
  return (
    <TabContent 탭={탭}/>
  )
}

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

 

완성이군요 이제 탭이라는 state를 0, 1, 2로 변경할 때마다 원하는 내용들이 잘 보입니다.

그럼 0번 버튼 누르면 0번 내용, 1번 버튼 누르면 1번 내용, 2번 버튼 누르면 2번 내용을 보여주고 싶으면 코드 어떻게 짜야합니까?

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

이러면 버튼 누를 때 마다 원하는 탭 내용을 보여줄 수 있습니다. 

 

센스좋으면 if 필요 없을 수도 있습니다

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

이래도 될듯요 

왜냐면 props.탭이 0이면 저 긴 array자료에서 0번 자료를 꺼내줄테니까요.