front-mockup(2)Tab 메뉴

기간

2021/11/04~2021/11/09

마이페이지

-Tab 메뉴

-Pagination

Tab 메뉴

.tabs{
width:100px;
padding:0.25em 1em;
font-size:1em;
cursor:pointer
}
.active-tabs{
border-top:0.7em solid blue;
}
.active-content{
display:block;
}
.inactive-content{
display:none;
}

import {useState} from "react";
function Mypage(){
  const [toggleState, setToggleState] = useState(1);
  const toggleTab = (index)=>{
    setToggleState(index);
  }
  return (
  <button 
      className={toggleState===1?"tabs active-tabs":"tabs"} onClick={()=>toggleTab(1)}>버튼1</button>
  <button 
      className={toggleState===2?"tabs active-tabs":"tabs"} onClick={()=>toggleTab(2)}>버튼2</button>
  <button 
      className={toggleState===3?"tabs active-tabs":"tabs"} onClick={()=>toggleTab(3)}>버튼3</button>

  <div className={toggleState===1?"active-content":"inactive-content"}>탭내용 1</div>
  <div className={toggleState===2?"active-content":"inactive-content"}>탭내용 2</div>
  <div className={toggleState===3?"active-content":"inactive-content"}>탭내용 3</div>
)
}

• toggleTab이라는 onClick 이벤트 함수를 만들어, 버튼을 클릭했을때 엘리먼트의 인덱스를 전달해 상태를 변경한다.
• 변경된 상태와 일치하는 button만 "active-tabs" 클래스를 가진다. 그 외의 button은 "tabs"만.
• 변경된 상태외 일치하는 div만 "active-content" 클래스를 가진다. 그 외의 div는 "inactive-content"만.

---

클릭이벤트를 실행했을때, 엘리먼트의 인덱스를 전달해 상태로 저장하는 방법을 배웠다. 참고한 코드에서는 content라는 클래스에 `display:none`으로 먼저 모두 없애놓고, toggleState===1에 해당하는 것만 `active-content` 클래스를 적용시켰다. 따라서 따로 `inactive-content`클래스를 적용하지 않았다.

같은 기능이라도 다양하게 구현할 수 있는 것 같다. 지난 프로젝트에서는 리액트 삼항연산자를 활용했는데, 이번에 새로운 방법을 배울 수 있었다.

reference

• https://dev.to/ziratsu/create-lovely-react-tabs-4g41
• https://github.com/Ziratsu/YT-REACT-TABS/blob/master/src/App.js