[React] Tab

map을 이용해서 랜더링하라!

1. 상태만들기

export const Tab = () => {
  const [currentTab, setCurrentTab] = useState(0);

2. 상태변경함수 만들기

  const selectMenuHandler = (index) => {
    // 포인트는 !!! 함수에도 index를 전달하는 것!
    setCurrentTab(index);
  };

3. 배열 받아서 li로 맵핑, 삼항연산으로 랜더링

{menuArr.map((el, index) => {
            return (
              <li
                // 삼항연산 랜더링
                className={currentTab === index ? "submenu focused" : "submenu"}
                // 온클릭 이벤트에서 index를 매개변수로 전달해줘야 한다!!!
                onClick={() => selectMenuHandler(index)}
              >
                {el.name}
              </li>

4. 메뉴 CSS 추가

const TabMenu = styled.ul`
  background-color: lightgray;
  display: flex;
  padding: 0px;

  .submenu {
    list-style: none;
    color: gray;
    font-weight: bold;
    width: 100%;
    border: 1px solid black;
    padding: 15px 10px;
    cursor: pointer;
    text-align:center;
  }

5. 포커스 및 애니메이션 추가

 .focused {
    background-color: #4000c7;
    color: rgba(255, 255, 255, 1);
    transition: 0.3s;
  }

전체코드

import { useState } from "react";
import styled from "styled-components";

const TabMenu = styled.ul`
  background-color: lightgray;
  display: flex;
  padding: 0px;

  .submenu {
    list-style: none;
    color: gray;
    font-weight: bold;
    width: 100%;
    border: 1px solid black;
    padding: 15px 10px;
    cursor: pointer;
    text-align:center;
  }
  .focused {
    background-color: #4000c7;
    color: rgba(255, 255, 255, 1);
    transition: 0.3s;
  }
`;

export const Tab = () => {
  const [currentTab, setCurrentTab] = useState(0);

  const menuArr = [
    { name: "Tab1", content: "Tab menu ONE" },
    { name: "Tab2", content: "Tab menu TWO" },
    { name: "Tab3", content: "Tab menu THREE" }
  ];

  const selectMenuHandler = (index) => {
    // 포인트는 !!! 함수에도 index를 전달하는 것!
    setCurrentTab(index);
  };

  return (
    <>
      <div>
        <TabMenu>
          {menuArr.map((el, index) => {
            return (
              <li
                // 삼항연산 랜더링
                className={currentTab === index ? "submenu focused" : "submenu"}
                // 온클릭 이벤트에서 index를 매개변수로 전달해줘야 한다!!!
                onClick={() => selectMenuHandler(index)}
              >
                {el.name}
              </li>
            );
          })}
        </TabMenu>
      </div>
    </>
  );
};