탭 화면

코드

HTML

Tab기능 구현

1. 부트스트랩에서 적당한 tab스타일을 가져온다.
2. useState();를 이용해서 각 탭을 클릭시 각 탭의 고유 숫자를 가지게 해준다.
3. 하위 컴포넌트 TabContent에 if구문으로 각각의 경우 보여줄 html내용을 리턴해준다.

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

<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{setTab(0); setSwit(false)}}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{setTab(1); setSwit(false)}}>Option 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2" onClick={()=>{setTab(2); setSwit(false) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
      
      <CSSTransition in={ swit } classNames="wow" timeout={500}>
        <TabContent tab = { tab } setSwit = { setSwit }/>
      </CSSTransition>



    function TabContent(props) {

      useEffect(()=>{
        props.setSwit(true);
      })

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

SCSS

.wow-enter {
  opacity: 0;
}

.wow-enter-active {
  opacity: 1;
  transition: all 500ms;
}