react에서 버튼 조건부 css 적용하기

현재 프로젝트에서 nav바를 만들고 있는데 nav바 우측에 버튼을 추가해야 하는데 스타일도 똑같고 따로따로 하나씩 만들자니 너무 효율성이 떨어 지는것 같아서 한번에 만드는법을 생각해 봤다.

우선 나는 mui의 makestyles를 이용했다.

📌 간단한 사용법은 이름으로 스타일을 만든다음 컴포넌트에 className에 할당해주면 되는 방식이다.

우선 사용할 버튼의 text를 리스트로 나타냈고 map을 이용해 button으로 만들어 주었고
공통 스타일을 입혀추고 text랑 현재 상태가 같으면 밑줄 스타일을 입혀줘서 최대한 짧게 코드를 짤 수 있었다.

import { makeStyles } from "@mui/styles";
import React, { useState } from "react";

const useStyles = makeStyles({
  btn: {
    color: "white",
    fontSize: "25px",
    backgroundColor: "transparent",
    border: "0",
    width: "120px",
    height: "30px",
    "&:hover": {
      textDecoration: "underline",
      textDecorationColor: "#4EC5D6",
      textDecorationThickness: "8px",
      fontWeight: "bold",
    },
  },
  underLine: {
    textDecoration: "underline",
    textDecorationColor: "#4EC5D6",
    textDecorationThickness: "8px",
    fontWeight: "bold",
  },
});

export const ButtonContainer = () => {
  const classes = useStyles();
  const buttonList = ["홈", "회사 소개", "공지사항", "FAQ"];
  const [selected, setSelected] = useState("홈");

  const buttonHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
    setSelected(e.currentTarget.innerText);
  };

  return (
    <div>
      {buttonList.map((item) => {
        return (
          <button
            className={`${classes.btn} ${
              item === selected ? classes.underLine : ""
            }`}
            onClick={buttonHandler}
          >
            {item}
          </button>
        );
      })}
    </div>
  );
};

❗️ 근데 이렇게 구현했지만 버튼별로 navigation도 추가해줘야해서 다시 하나씩 만들어야 할 것 같다...