리액트로 쇼핑몰 사이트 만들기 #7

탭 3개 적용하기

탭이란 : 버튼을 눌러 원하는 창을 띄워주는 UI

구현 순서
1. UI 미리 디자인 하기

<div>내용0</div>
<div>내용1</div>
<div>내용2</div>

 

2. 각 탭의 상태를 저장해둘 state 가 필요하다

탭은 3개이므로 상태도 3가지가 필요하다
각각의 탭을 0, 1, 2번으로 지정하였으니 state 자료형은 0, 1, 2 로 결정
초기값은 0번째 탭으로 

function Detail() {
    ....
    let [tab, setTap] = useState(0)
    ....
}

3. state에 따라 UI가 어떻게 보일지 조건문을 작성해준다


(1) 삼항연산자 사용

function Detail() {
    ....
      {
        // state 가 0이면 내용0 보이기
        tab == 0 ? <div>내용0</div> : null
      }
      {
        // state 가 1이면 내용1보이기
        tab == 1 ? <div>내용1</div> : null
      }
      {
        // state 가 2이면 내용2 보이기
        tab == 2 ? <div>내용2</div> : null
      }
    ....
}

(2) if 문 사용

주의할 점 
1. html 코드 안에 if 문을 사용할 수 없으므로 컴포넌트로 만들어주어야 한다.
2. 컴포넌트 안에는 return 문이 꼭 있어야한다.

function Detail() {
    ....
    <TabContent />
    ....
}

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

그리고 TabContent 컴포넌트에서 부모 컴포넌트인 Detail 의 tab 이라는 state 사용하였으니 props 로 전달해주어야한다.

<TabContent tab={tab}/>


function Detail() {
    ....
    <TabContent />
    ....
}

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