Tab(React)
Tab만들기
1. tab component
화면에 보여지는 tab은 총 3개로 클릭할 때마다 배경색이 변하도록 만들었다.
list는 tabs.map으로 랜더링하고, index를 이용해 현재 tab이 어떤 탭인지 확인할 수 있도록 했다.
const [current, setCurrent] = useState(0)
const tabs = ["ONE", "TWO", "THREE"]
const selected = {"원하는 스타일 속성"}
<ul>
{tabs.map((tab, index) =>
<li
key={index}
onClick={() => changeTab(index)}
style={current === index ? selected : {}}
>
{`Tab${index +1}`}
</li>
)}
</ul>
2. 문구 변경
tab을 클릭하면 아래 있는 문구도 함께 변경되도록 했다. tabs 배열의 값을 가져와 랜더링 해주는 방식을 택했다.
<span>
Tab Menu {tabs[current]}
</span>
3. 완성
css에 transition 속성을 추가해 클릭시 배경이 부드럽게 바뀌도록 했다.
Author And Source
이 문제에 관하여(Tab(React)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyejeong/TabReact저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)