React, 탭 UI 만들기

탭 UI

버튼 n개와 박스 n개를 미리 만들어놓고 버튼을 누를 때 마다 그에 맞는 박스를 보여주는 UI

 

탭 UI 만들기

1. Html, CSS로 탭 디자인 미리 완성
2. UI의 현재 상태를 저장할 state 하나 만들기
3. state에 따라서 UI가 어떻게 보일지 작성

 

- 자식컴포넌트에서 props 쉽게 쓰고 싶다면

function TabContent({tab}){
  return [ <div>0</div>, <div>1</div>, <div>2</div> ][tab]
}

자식컴포넌트에서 props라고 파라미터를 하나만 작명하는게 아니라

{state1, state2 ... }으로 작성하면 props.state1 이렇게 쓸 필요가 없어짐