[TIL] 1차 프로젝트 기억하고 싶은 코드 1. Tab 버튼 구현하기

◎1차 프로젝트 정육각에서 내가 맡은 상품 디테일 페이지에 탭 버튼 기능이 있었다.

탭 버튼 자체는 처음이라 어떻게 하는지 감이 안 와서 구글링을 해보고 그에 맞게 코드를 적용시켰다.

1. Detail.js

import React, { Component } from 'react';
import Header from '../../components/Header/Header';
import Product from './Product/Product';
import TabContainer from './TabContainer/TabContainer';
import Tab from './Tab/Tab';
import Explicate from './Explicate/Explicate';
import ReviewCmt from './ReviewCmt/ReivewCmt';
import ProductInfo from './ProductInfo/ProductInfo';
import Footer from '../../components/Footer/Footer';
import './Detail.scss';

class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
        }
    }

    updateIndex = index => {
        this.setState({ index });
    }
    
    render() {
        const { index } = this.state;
       
        return (
            <div className="Detail">
                <Header />
                    <div className="container">
                        <section className="cont1">
                            <Product />
                        </section>
                        <section className="contBox cont2">
                            <TabContainer index={index} updateIndex={this.updateIndex}>
                                <Tab title="상품설명" className="listBox">
                                    <Explicate />
                                </Tab>
                                <Tab title="상품리뷰" className="listBox">
                                    <ReviewCmt />
                                </Tab>
                                <Tab title="상품정보안내" className="listBox">
                                    <ProductInfo />
                                </Tab>
                            </TabContainer> 
                        </section>
                    </div>
                <Footer />
            </div>
        );
    }
};

export default Detail;

• Detail.js에서 탭버튼이 필요한 곳을 TabContainer로 감싸고 자식으로 Tab component에서 title을 정해주고 그 안에 자식으로 탭 버튼 시 보이는 컴포넌트를 렌더링 한다.

• 초기 index를 0으로 설정하여 undateIndex를 porps로 넘겨준다.

2. TabContainer.js

import React, { Component } from 'react';
import '../Tab/Tab.scss'
class TabContainer extends Component {
    renderTab = (tab, i) => {
        const { updateIndex = () => {}} = this.props;
        const onClick = () => updateIndex(i);
        const color = colorChange(
            "tabTit",
            i === this.index ? "active" : "primary"
        );

        function colorChange(...arg) {
            return arg.filter(Boolean).join(" ");
        }
        return (
            <button className="tabBtn" key={i}>
                    <span onClick={onClick} className={color}>{tab.props.title}</span>
            </button>
        );
    }
    render() {
        const { children, index = 0} = this.props;
        this.index = index;
        if(index >= children.length) {
            this.index = children.length - 1;
        }else if( index <= 0) {
            this.index = 0;
        }
        const kid = children[index];
        const tabs = children.map(this.renderTab);
        return (
            <div className="TabContainer">
                <div className="tabTitBox">{tabs}</div>
                <div className="tabKid">{kid}</div>
            </div>
        );
    }
}

export default TabContainer;

• TabContainer component에서 children, index를 비구조화 할당을 한다.

• 만약 index가 children.lengh보다 크면 children.length -1을 하고 아니면 0으로 한다. (여기서 childeren은 Detail.js에서 Explicate, ReviewCmt, ProductInfo을 뜻한다.)

• kid 변수에 chilren[index]을 렌더링 한다.

• tabs 변수에는 map 함수를 사용하여 renderTab 함수를 실행한다.

• tabs에는 Detail.js 에서 넘겨준 title을 보여주게 한다. (title 속성을 이렇게 사용하는법을 배웠다.)

• span에 onClick 이벤트 핸들러를 사용하여 부모의 updateIndex(i)를 실행하게 한다. -> button의 key값으로 설정

• span className에 color 함수를 넣어서 조건에 맞게 active class와 primary class를 동적으로 넣어주며 색을 바꿔준다.  

3. Tab.js

import React, { Component } from 'react';
import './Tab.scss';
class Tab extends Component {
    render() {
        const { children } = this.props;
        return (
            <>{children}</>
        );
    }
}

export default Tab;

• Tab.js에서는 부모에서 받아온 children을 렌더링 해준다.

4. 결과

 

5. 느낀 점

◎ 처음으로 탭 버튼 기능을 구현을 해보았다.

직접 구글링 하여 코드를 보면서 이해하고 그에 맞게 적용하는데 시간이 좀 걸렸다.

더 쉽게 할 수 있는 방법을 session 때 배웠지만, 일단 고생해서 구현한 코드로 적용시켰다.

우리가 쉽게 접할 수 있는 탭 버튼이 많은 과정을 거쳐야만 나온다는 것을 새삼 느꼈다.

탭 버튼은 보통 index의 값으로 많이 접근하여 구현하는 거 같다.

내가 짠 코드를 이해 못하면 안 되는데.. 블로그 정리하면서 이해하는데 시간이 걸렸다.

앞으로 중요한 코드는 바로 블로깅 하는 습관을 길러야겠다.