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

오늘은 쇼핑몰에서 흔히 볼 수 있는 탭 ui를 만들어보겠습니다. 

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

 

1. HTML CSS로 디자인 미리 완성

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

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

 

 

1.HTML,CSS로 탭 디자인 미리 완성

버튼3개와 <div> 3개가 필요합니다. 

react-bootstrap 사이트에서 버튼을 가져왔습니다.

문서를 보니 eventKey속성은 버튼마다 맘대로 작성하면 된다고 합니다. defaultActiveKey 여기는 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분입니다. 

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

 

 

 

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

function DetailPage(){
  let [number, setNumber] = useState(0)
  (생략)
}

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

 

 

 

 

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

state가 0이면 0번 내용보여주세요, 1이면 1번내용 보여주세요 라고 코드짜면 됩니다. 

3항연산자 사용해도 되지만 컴포넌트로 만들어보겠습니다. 

function DetailPage(){
  let [number, setNumber] = useState(0)
  
  return (
    <TabContent/>
  )
}

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

그래서 컴포넌트로 만들어서 DetailPage안에 넣어줬습니다. 하지만 잘 작동하지 않습니다. 

바로 props로 보내줘야 합니다. 

function DetailPage(){
  let [number, setNumber] = useState(0)
  
  return (
    <TabContent number={number}/>
  )
}

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

이제 버튼을 클릭할때마다 버튼에맞게 number를 0, 1, 2로 변경해줘야합니다. 

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

 

if없이 다음과 같이도 작성할 수 있습니다.

props.number가 0이면 저 긴 array자료에서 0번자료를 꺼내줍니다. 

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

 

 

 

props쉽게 쓰고 싶으면 아래와 같이 작성할 수 있습니다. 

자식컴포넌트에서 props라고 파라미터를 하나만 작명하는게 아니라 {state1이름, state2이름..}

이렇게 작성하면 props.state1이름 이렇게 쓸 필요가 없어집니다. 

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

 

그래서 위의 방법을 적용하면 아래와같이 변경됩니다. 

function TabContent({number})
{
  if([number]==0){
    return <div>내용0</div>
  }
  if([number]==1){
    return <div>내용1</div>
  }
  if([number]==2){
    return <div>내용2</div>
  }
}

 

결과