리액트에서 탭 UI 만들기

동적인 UI 만드는 방법

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

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

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

 

 

먼저,

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

디자인하기 귀찮아서 버튼은 react-bootstrap 사이트에서 복사함

 

 

두번째로, UI의 현재상태를 저장할 state를 만들기

 

function Detail(){
  let [tab, setTab] = useState(0)
  (생략)
}

탭 ui의 상태는

0번 내용이 보이거나/ 1번내용이 보이거나/ 2번내용이 보이거나

셋중하나이기 때문에 그때그때마다 setTab()으로 state를 변경해주면 될듯

 

 

마지막으로, state에 따라서 ui가 어떻게 달라 보일지 작성

 

function Detail(){
  let [tab, setTab] = useState(0)
  
  return (
    <TabContent/>
  )
}

function TabContent(){
  if (tab === 0){
    <div>내용0</div>
  }
  if (tab=== 1){
    <div>내용1</div>
  }
  if (tab === 2){
    <div>내용2</div>
  }
}

하지만, 위의 코드를 잘 작동하지 않는데요.

왜일까요?

바로 TabContent가 tab이라는 state를 부모 컴포넌트에서 가져올때, props 를 사용하지 않았기 때문이죠.

그래서 부모 컴포넌트인 Detail 안에 있는 <tabContent> 에 tab ={tab}으로 props를 등록해주고, 

자식 컴포넌트인 TabContent에 인자로 props를 넣고, props.tab으로 바꿔줍니다

 

function Detail(){
  let [tab, setTab] = useState(0)
  
  return (
    <TabContent tab={tab}/>
  )
}

function TabContent(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>
  }
}

이제  tab이라는 state를 0, 1, 2로 변경할 때마다

 

원하는 내용들이 잘 보입니다.

우리가 원하는 건 버튼을 클릭할때 입니다

그럼 0번 버튼 누르면 0번 내용

1번 버튼 누르면 1번 내용

2번 버튼 누르면 2번 내용 

을 보여주도록 하고 싶으면요?

 

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

이렇게 하면 됩니다!!

 

짜잔!