버튼이 3개가 있고 내용이 3개 있으면

버튼을 누르면 거기에 맞는 내용을 보여주면 됨.

그냥 모달 창이 3개있다 생각하면 됨.

react-bootstrap에서 가져오기

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

state 만들어 tab 값 저장

  let [tab, setTab] = useState(0);

tabcontent 컴포넌트 만들어줌

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}) {
  [<div>내용0</div>,<div>내용1</div>,<div>내용2</div>][tab];
}

위와 같이도 사용 가능

tab 에 onclick 이벤트 걸어줌

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

전환 애니메이션을 줘보자.

전환애니메이션은 class를 하나 만들어서

뗏다 붙였다 해보자.

1. 애니메이션 동작 전 class
2. 동작 후 class
3. transition을 넣어서 추가
4. 원할 때 2번 class 부착

1. css 만들기 (1,2,3번)

.start {
  opacity: 0;
}

.end {
  opacity: 1;
  transition: opacity 0.5s;
}

2. css 부착

function TabContent({ tab }) {
  let [fade, setFade] = useState('');

  useEffect(() => {
    let timer = setTimeout(() => {
      setFade('end');
    }, 100);

    return () => {
      
      setFade('');
    }
  }, [tab])
  return (
		<div className={"start "+fade}>{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]}</div>
	);
}

위와 같이 만들면 잘 동작하게 됨.

그런데 이상하다 왜 setTimeout을 써야만 하는가…

react 18버전 이후로는 automatic batching이라는 것이 있단다

state 변경해주는 애들이 근처에 있다면 모든 state를 변경해준 후 렌더링 해준다함.

합쳐서 해주기 때문임.