TIL - 40일차 Button 컴퍼넌트 만들기

문제점 : 다음과 같이 버튼을 만들었는데 button 기능이 작동이 안됨

import React from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import Logo from "../components/Logo";
import MainButton from "../components/MainButton";
const Home = () => {
  const navigate = useNavigate();
  return (
    <div>
      <MainHead>
        <Logo />
        <ButtonContainer>
          <MainButton>로그인</MainButton>
          <MainButton onClick={() => navigate("/SignUp")}>회원가입</MainButton>
          <MainButton onClick={() => navigate("/List")}>문제풀기</MainButton>
          <MainButton onClick={() => navigate("/Post")}>퀴즈만들기</MainButton>
        </ButtonContainer>
      </MainHead>
    </div>
  );
};

 

 

해결방법 : component로 만든 버튼에서 함수를 쓸려면 props를 받아야 한다.

const MainButton = (props) => {
  return <MainButtonStyle {...props}> {props.children}</MainButtonStyle>;
};

export default MainButton;

아래와 같이 props로 함수를 받아줘야지만 기능이 작동한다.

(MainButtonStyle은 스타일드 컴퍼넌트이다. )