리액트 탭UI

import { Nav, Tab } from "react-bootstrap";
  <Nav variant="tabs" defaultActiveKey="/home">
        <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>

를 추가해주면 다음과같이 버튼이 생성되는것을 볼수있다.

1. html css로 디자인 미리 완성해놓고

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

3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했습니다.

버튼 1을 누르면 내용1이 보이게끔 만들고싶다!

component 를선언해 if문을 선언해줄수있다.





1.. <ChangeTap 탭={탭}></ChangeTap>
  //탭안에 요소들을 changeTap에서 사용할수있게
  전달해준다.
 
  2.
function ChangeTap(props) {
  if (props.탭 == 0) {
    return <div>내용0</div>;
  } else if (props.탭 == 1) {
    return <div>내용1</div>;
  } else if (props.탭 == 2) {
    return <div>내용2</div>;
  }
}

3.   <Nav.Link
            eventKey="link0"
            onClick={() => {
              탭변경(0);
            }}
          >
            
   <Nav.Link
            eventKey="link1"
            onClick={() => {
              탭변경(1);
            }}
          >
  <Nav.Link
            onClick={() => {
              탭변경(2);
            }}
            eventKey="link2"
          >
            버튼2
          </Nav.Link>
  

해주면

다음과같이 보여지는것을 볼수있다.

사실 더좋은 방법으로는 if문없이

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

로 바꿀수도있다....센스가좋으면 0번쨰 1번쨰 2번쨰