[React] 공통 컴포넌트 세팅

# button에 type지정

App.js

import "./App.css";

import MyButton from "./components/MyButton";

function App() {
  return (
    <div className="App">
      <MyButton
        text={"버튼"}
        onClick={() => alert("버튼클릭")}
        type={"positive"}
      />
      <MyButton
        text={"버튼"}
        onClick={() => alert("버튼클릭")}
        type={"negative"}
      />
      <MyButton text={"버튼"} onClick={() => alert("버튼클릭")} type={""} />
    </div>
  );
}

export default App;

MyBotton.js

const MyButton = ({ text, type, onClick }) => {
  return (
    <button
      className={["MyButton", `MyButton_${type}`].join(" ")}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

MyButton.defaultProps = {
  type: "default",
}; //type을 전달하지 않으면 default

export default MyButton;

※ type이 default, positive, negative 외 다른 버튼이 들어오는 것을 막을려면?

const btnType = ["positive", "negative"].includes(type) ? type : "default";

→ type에 positive와 negative가 없는 글자가 오면 default로 설정

const MyButton = ({ text, type, onClick }) => {
  const btnType = ["positive", "negative"].includes(type) ? type : "default";
  return (
    <button
      className={["MyButton", `MyButton_${btnType}`].join(" ")}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

MyButton.defaultProps = {
  type: "default",
};
//type을 전달하지 않으면 default

export default MyButton;