[React] 탭UI 만들어보기

이런 탭 ui를 만들거임

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

동적인 ui만드는법

1. html, css로 미리 디자인 완성
2. UI의 현재 상태를 저장할 state 생성
3. state에 따라 UI가 어떻게 보일지 작성

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

react-bootstrap사이트에서 버튼3개를 복붙해옴

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

div박스 3개도 구현했음

문서를 참고하니 eventKey 속성은 버튼마다 맘대로 작명하면 되고,
defaultActiverKey는 페이지 로드 시 어떤 버튼에 눌린 효과를 줄 지 결정하는 부분이다.

2. UI의 현재 상태를 저장할 state 생성

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

탭ui는
0번 내용이 보이거나 / 1번 내용이 보이거나 / 2번 내용이 보이거나

셋 중 하나이기 때문에 숫자인 0, 1, 2로 상태를 표현했음

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

상항연산자를 써도 되는데 컴포넌트를 열어서 if문을 써주겠음.

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

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

🤔 이 코드가 잘 동작하지 않는 이유는 뭘까?

props

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는 Detail안에 있지 TabContent안에 있지 않음.

그래서 props전송을 해주어야 하고,
TabContent도 컴포넌트 이므로 return을 추가해주어야 함

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

탭에서 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>

이렇게 하면 버튼 누를 때마다 원하는 탭 내용을 보여수 있음

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

이렇게도 가능

{staet1이름, staet2이름...} 이렇게 작성하면
props.state1이름 이렇게 쓸 필요가 없음