Tab menu 쉽게 만들기

만들어 볼 것

버튼 값에 따라 아래 보여지는 내용이 달라지는 탭메뉴를 쉽게 만들어봤다

 

1.  버튼 구성

const tabs = [
    { id: 'default', label: '후라이드' },
    { id: 'spicy', label: '양념' },
];

• tabs 배열을 선언 후 각 요소에 id와 label 속성을 가진 객체 구성

2. 탭버튼 생성

// 위에서 선언한 tabs 배열을 사용하여 동적으로 탭 버튼 생성
{tabs.map((tab) => (
    <button
        key={tab.id}
        type="button"
        className={activeTab === tab.id ? 'active' : ''}
        onClick={() => handleTabClick(tab.id)}
    >
        {tab.label}
    </button>
))}

• tabs.map() : map을 사용하여 배열의 각 요소에 대해 콜백 함수 호출
• key : 배열을 렌더링할 때 각 요소를 식별하는 역할
• type : button : 버튼으로 설정시 기본 동작인 폼 제출을 방지하고 단순한 클릭 이벤트 처리만 한다
• className : activeTab 변수 값과 현재 id값을 비교하여 활성화된 탭인지 여부를 판단하여 active 클래스 추가
• onClick : 버튼 클릭시 클릭된 탭의 tab.id값을 전달
• tab.label : 버튼의 내용 텍스트

3. 이벤트 상태값

    const [activeTab, setActiveTab] = useState('default');
    const handleTabClick = (tabId) => {
        setActiveTab(tabId);
    };

• [activeTab. setActiveTab] : useState를 사용하여 기본 active 생성 / 현재 활성화 된 탭의 id 값을 저장
• handleTabClick : 가져온 tab.id 값을 넘겨 activeTab 상태를 갱신한다

 

4. 전체코드

import React, { useState } from 'react';

 

const tabs = [

{ id: 'default', label: '후라이드' },

{ id: 'spicy', label: '양념' },

];

const [activeTab, setActiveTab] = useState('default');

const handleTabClick = (tabId) => {

setActiveTab(tabId);

};

export default () => {

return (

<div>

// 위에서 선언한 tabs 배열을 사용하여 동적으로 탭 버튼 생성

{tabs.map((tab) => (

<button

key={tab.id}

type="button"

className={activeTab === tab.id ? 'active' : ''}

onClick={() => handleTabClick(tab.id)}

>

{tab.label}

</button>

))}

</div>

);

};