[React] 탭 UI 만들기.

 

 

동적인 ui 만들기 3step

 

Step 1.html css로 미리 디자인 해 준다.

 

부트스트랩에서 디자인 된 탭 창을 가져오자.

여기서 defaultActiveKey는 처음 눌려있는 탭을 의미한다.

<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>

Step 2. 탭 상태 저장해둘 state 필요

탭의 종류가 3개이므로 3가지 상태를 저장할 수 있는 숫자를 초기값으로 설정해둔다.

 

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

state 값이 0일 때, 1일 때 , 2일때 에 맞게 각 내용 0, 1, 2를 화면에 표시해 준다.

 

그전에 사용했던 동적 UI 에서 했던 방식으로 하면 이렇게 표현이 가능하다.

 

삼항 연산자가 아닌 if 문으로도 구성이 가능한데 컴포넌트 안에 넣어서 관리하면 된다

이때 if 문으로 작성하고자 한다면 반드시 조건문 내부에 return 문이 함께 있어야 한다.

상위 컴포넌트에서 컴포넌트의 tap 값을 props 로 받아와야 한다.

 

 

 

강사님의 꿀팁

---

꿀팁 1.

 

하위 컴포넌트에서 매번 props를 등록하는게 귀찮다!

 

하위 컴포넌트의 파라미터에 props 대신 { } 중괄호 안의 가져온 변수 명을 그대로 넣어준다.

 

그대로 넣어주고 기존 props.tap 대신에 tap 을 사용하면 된다.

 

이를 구조 분해 할당이라고 한다. 

이후에 기회가 된다면 한번 정리해야 겠다.

useParams 부분에서 id 값 받아올 때에도 구조 분해 할당을 사용한 것이다.

꿀팁 2.

 

컴포넌트 내부에 if 문 구조 대신에

이런식으로 return 문 내부에 배열을 선언하고 해당 배열의 tap 번째 부분을 화면에 보여줄 수도 있다.

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/