react 기초 (12)-탭 UI만들기...if

1.html css 디자인 - 부트스트랩 에서 가져옴

2. 탭상태를 state 에 저장

3.state 에따라서 UI가 어떻게 보일지 작성

-state가 0 이면 내용 0 보이기,state가 1 이면 내용 1 보이기,state가 2 이면 내용 2 보이기

이렇게 삼항연산자를 사용해도 되지만 if문을 사용하는게 더 좋을것같담

but,html안에선 if조건문을 사용할 수  없음 ㅠㅠ

그래서 이렇게 밖에 써준다

요렇게 else if를 사용해줘도 됨 ㅎㅎ

컴포넌트를 만들어 주면 되겠쥬

 

props 전송도 빼먹지않고 해줘야합니당

 

4) 버튼 1을 누르면 내용 1이 보이게 하고 싶기때문에 

요 스위치만 바꿔주면 되겠쥬 !? 이걸 버튼에 적용 하고 싶다면

버튼0 을 누르면 useState를 0로 바꾸고

버튼1 을 누르면 useState를 1로 바꾸고

버튼2 을 누르면 useState를 2로 바꾸고

이런식으로 버튼에 코드를 짜봅시다

array 자료를 활용해서 이렇게 간단히 구현할수도 있음