[react] 리액트 탭 구현하기(ft. tailwind)

react tab

 

react에서 탭화면을

구현합니다 . 

 

구현 내용

탭 버튼 클릭 시 해당 탭 화면을 바로 보여줍니다. 
react hooks 방식을 이용합니다.
스타일을  tailwind 를 적용합니다. 

 

구현 화면

 

리액트로 탭 구현 방법

코드

import React, { useState } from 'react';

const MainContent = () => {
    const [openTab, setOpenTab] = useState(1);

    return (
       
            <div className='grid grid-cols-1 p-4 mt-2'>
                <ul className="flex mb-0 list-none flex-wrap flex-row" role="tablist">
                    <li className="w-1/4 flex-auto text-center">
                        <a
                            className={
                                "text-xs px-2 py-2 shadow-lg rounded block leading-normal cursor-pointer " +
                                (openTab === 1
                                    ? "text-white bg-gray-600"
                                    : "text-gray-600 bg-white")
                            }
                            onClick={(e) => {
                                e.preventDefault();
                                setOpenTab(1);
                            }}
                            data-toggle="tab"
                            href="#link1"
                            role="tablist"
                        >
                            1번 탭
                        </a>
                    </li>
                    <li className="w-1/4 flex-auto text-center">
                        <a
                            className={
                                "text-xs px-5 py-2 shadow-lg rounded block leading-normal cursor-pointer " +
                                (openTab === 2
                                    ? "text-white bg-gray-600"
                                    : "text-gray-600 bg-white")
                            }
                            onClick={(e) => {
                                e.preventDefault();
                                setOpenTab(2);
                            }}
                            data-toggle="tab"
                            href="#link2"
                            role="tablist"
                        >
                            2번 탭
                        </a>
                    </li>
                    <li className="w-1/4 flex-auto text-center">
                        <a
                            className={
                                "text-xs px-5 py-2 shadow-lg rounded block leading-normal cursor-pointer " +
                                (openTab === 3
                                    ? "text-white bg-gray-600"
                                    : "text-gray-600 bg-white")
                            }
                            onClick={(e) => {
                                e.preventDefault();
                                setOpenTab(3);
                            }}
                            data-toggle="tab"
                            href="#link3"
                            role="tablist"
                        >
                            3번 탭
                        </a>
                    </li>
                    <li className="w-1/4 flex-auto text-center">
                        <a
                            className={
                                "text-xs px-5 py-2 shadow-lg rounded block leading-normal cursor-pointer " +
                                (openTab === 4
                                    ? "text-white bg-gray-600"
                                    : "text-gray-600 bg-white")
                            }
                            onClick={(e) => {
                                e.preventDefault();
                                setOpenTab(4);
                            }}
                            data-toggle="tab"
                            href="#link4"
                            role="tablist"
                        >
                            4번 탭
                        </a>
                    </li>

                </ul>
                <div className="relative flex flex-col min-w-0 break-words h-64 border-4 border-gray-500 text-3xl text-center">
                    <div className="flex-auto">
                        <div className="tab-content tab-space">
                            <div className={openTab === 1 ? "block" : "hidden"} id="link1">
                              1번
                            </div>
                            <div className={openTab === 2 ? "block" : "hidden"} id="link2">
                               2번
                            </div>
                            <div className={openTab === 3 ? "block" : "hidden"} id="link3">
                                3번
                            </div>
                            <div className={openTab === 4 ? "block" : "hidden"} id="link4">
                                4번
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
};

export default MainContent;

 

구현 영상