탭 UI

동적인 UI 만들기

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

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

<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 사이트에서 tap 사용
• eventKey 속성은 버튼마다 맘대로 작명
• defaultActiveKey는 페이지 로드 시 어떤 버튼에 눌린 효과를 줄지 결정하는 부분

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

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

• state 하나 만들기
• 탭 UI의 상태는 0번 내용이 보이거나, 1번 내용이 보이거나 2번 내용이 보이도록 하기
• 셋 중 하나이기 때문에 0, 1, 2 숫자로 상태를 표현

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

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의 번호에 따라 몇번 내용 보이도록 코드 작성
• 삼항연산자 대신 컴포넌트 만들어서 코드 작성
• 탭이라는 state는 밑의 컴포넌트에 없기 때문에 부모에 있던 state를 자식이 쓰기 위해 props로 보내기

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

• 이렇게 코드를 작성한다면 그 숫자에 맞는 버튼에 내용이 나온다.

Tip

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

• 이렇게 작성하여 props.탭이 0이면 긴 array 자료에서 0번 자료를 꺼내줄 것이다.

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

• 자식 컴포넌트에서 props라고 파라미터를 하나만 작명하는게 아니라 원래는 props라고 적혀 있어야할 파라미터 자리에 {state1이름} 이렇게 작성하면 props.state1이름 이렇게 쓸 필요가 없어진다.
• {state1이름, state2이름} 이런식으로 여러개의 props를 받아올수도 있다.