[React] MyButton을 만들어 재활용하기

MyButton을 만들어 재활용하기

오늘은 MyButton을 만들어 재활용해볼 건데요 !

components>MyButton.js입니다.

1째 줄; 버튼을 만들기 위해 필요한 버튼에 들어갈 텍스트, 유형, 클릭하면 발생할 함수를 props로 받았습니다.

2째 줄 ; type가 positive, negative 모두 아니라면 default로 설정하도록 하였습니다.

5,6째 줄 ; props로 받은 type을 변경한 btnType을 이용하여 class명을 지정하고 onClick함수를 속성으로 설정하였습니다.

7째 줄 ; props로 받은 text를 button 안에 출력되도록 하였습니다.

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",
};

export default MyButton;

 

다음은 App.js입니다.

8~16째 줄 ; MyHedear Component로 MyButton Component를 props로 사용하였습니다.

11째 줄 ; MyButton의 props로 text, onClick을 전달하였습니다. 고로 type은 default값인 default를 가지게 됩니다.

21째 줄 ; MyButton의 props로 text, onClick,type을 전달하였습니다.

import MyButton from "./components/MyButton";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <MyHeader
          headText={"App"}
          leftChild={
            <MyButton text="왼쪽 버튼" onClick={() => alert("왼쪽 클릭")} />
          }
          rightChild={
            <MyButton text="오른쪽 버튼" onClick={() => alert("오른쪽 클릭")} />
          }
        />
        <h2>App.js</h2>
        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 클릭")}
          type={"positive"}
        />
        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼 클릭")}
          type={"negative"}
        />
        <MyButton text={"버튼"} onClick={() => alert("버튼 클릭")} />
       </div>
    </BrowserRouter>
  );
}

export default App;