인프런 커뮤니티 질문&답변

grs0412

작성한 질문수

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

Common 컴포넌트 - Button 생성

styled component 버튼 타입에러

해결된 질문

작성

463

수정됨

import { ReactNode } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

interface ButtonProps {
  children?: ReactNode;
  onClick: (e: any) => void;
  type?: "link" | "button";
  url?: string;
}

const StyledButton = styled.button<ButtonProps>`
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
`;

function Button({ children, onClick, type = "button", url }: ButtonProps) {
  const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>;

  const RealLink = (
    <StyledButton onClick={() => {}}>
      <Link to={url!}>{children}</Link>
    </StyledButton>
  );
  return <div></div>;
}

export default Button;

강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니

button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요

react node.js mongodb express typescript

답변 1

이동훈

지식공유자

grs0412님 질문 남겨주셔서 감사합니다:)

해당 onClick을 required하게 설정을 해놔서 생기는 타입 에러인 것 같습니다.

interface ButtonProps { 
 children?: ReactNode; 
 onClick?: (e: any) => void; 
 type?: "link" | "button"; 
 url?: string; 
}

다음과 같이 onClick 메소드를 optional하게 받아주시기 바랍니다.

다시한번 질문 남겨주셔서 감사합니다.

grs0412

작성한 질문수

전체 Q&A

질문하기