React실전11 탭 UI 만들기

리액트에서 탭 UI 만들기

탭 UI 만들기

1. html css 로 미리 디자인. 탭의 버튼들과 내용들을 미리 디자인 react-bootstrap 사이트 이용하기 nav로 검색

2. UI의 현재 상태를 저장할 state 하나 만들고
3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했습니다. 

1.

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

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

상단에 state 하나 만들었습니다. 탭 UI의 상태는 0번 내용이 보이거나 / 1번 내용이 보이거나 / 2번 내용이 보이거나 셋 중 하나기 때문에 저는 0, 1, 2 숫자로 상태를 표현해보겠습니다.

3.

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

4.

완성이군요 이제 탭이라는 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 쉽게 쓰고 싶으면

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

자식컴포넌트에서 props라고 파라미터를 하나만 작명하는게 아니라 {state1이름, state2이름 ... } 이렇게 작성하면 props.state1이름 이렇게 쓸 필요가 없어집니다. 마음에 들면 씁시다.