React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁

풀이

function Detail(props){
  let [tab, setTab] = useState(0);

  return (
    <div className="container">
      <Nav variant="tabs"  defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link eventKey="link0" onClick={()=> {setTab(0)}}>버튼0</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link1" onClick={()=> {setTab(1)}}>버튼1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link2" onClick={()=> {setTab(2)}}>버튼2</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent tab={tab}/>
    </div> 
  )
}
function TabContent(props){
  if (props.tab === 0) {
    return <div>내용0</div>
  } else if (props.tab === 1) {
    return <div>내용1</div>
  } else if (props.tab === 2) {
    return <div>내용2</div>
  }
}

---

더 센스있게 풀기

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

---

알게 된 점

JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어 흐름 구조다. 따라서 JSX 내에서 switch 문을 사용하면 구문 오류가 발생한다.

---

props.컴포넌트 다 쓰기 귀찮을 때 팁

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

props 이름을 중괄호로 감싸 매개변수로 넣으면 props를 생략해도 된다.

props에서 여러개의 변수를 추출하고 싶으면 아래처럼 한다.

function TabContent({ tab, title }) {
  // tab와 title 변수를 사용하여 작업 수행
  // ...
}

---

출처 : 코딩애플 https://codingapple.com/