React - tab UI 만들기

쇼핑몰에서 흔히 볼 수 있는 tab UI를 만들어 보자.

(솔직히 쉬운 기능인데 자주 쓰일것 같아서 기록하기 위함)

일단 기능을 설명하자면 버튼 3개와 각 버튼을 눌렀을 때 보여줄 박스 3개를 미리 만들어 놓고 버튼 누를때마다 state가 변경되면서 다른 박스를 보여주는 것이 핵심이다.

1. html, css로 디자인 미리 완성하기
react bootstrap에서 Nav태그 중에 variant가 tab인거 가져와서 사용함

<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>
<div>내용0</div>
<div>내용1</div>
<div>내용2</div>

2. UI의 현재 상태를 저장할 state 만들기

let [tab, setTab] = useState(0)

0이면 0번내용, 1이면 1번내용, 2면 2번내용 보여줄 수 있게 0을 저장함

3. state에 따라 UI가 어떻게 보일지 작성
삼항연산자로 작성해도 되지만 강조되고 반복되는 코드는 사람을 불안하게 해요.ㅎ
그래서 컴포넌트로 만들었음.

function TabContent(props) {
    if( props.tab == 0 ){
        return <div>내용0</div>
    }
    if( props.tab == 1 ){
        return <div>내용1</div>
    }
    if( props.tab == 2 ){
        return <div>내용2</div>
    }
}

이제 만든 컴포넌트를 불러주고 tab state를 넘겨주기 위해 tab={tab} 속성을 컴포넌트에 적어줌

이후 버튼을 클릭할때마다 tab state가 달라져야 하니까

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

이렇게 클릭 이벤트를 넣어주면 완성!

(참고)
TabContent 컴포넌트로 props를 넘겨줄때 원래 TabContent(props) 라고 썼는데 이를 TabContent({tab}) 이라 쓰면 props.tab이라 쓰지 않고 tab이라 써도 된다.

출처 : https://codingapple.com/