typescript,styled-compoents 외부 컴포넌트 만들기

//외부 컴포넌트 집합/Button.tsx
import React from "react";
import { styled } from "styled-components";

interface BtnProps {
  w: number;
  h: number;
  color: string;
  children: React.ReactNode;
}
const Btn = styled.button<BtnProps>`
  width: ${(props) => props.w};
  height: ${(props) => props.h};
  color: ${(props) => props.color};
`;

const Button: React.FC<BtnProps> = ({ children, w, h, color }) => {
  return (
    <Btn w={w} h={h} color={color}>
      {children}
    </Btn>
  );
};

export default Button;

• 가용할 곳

import Button from "../components/Button";

  <Button w={50} h={50} color={"red"}>
    test Btn
  </Button>

• props를 지정해주는 것 까지는 어렵지않다.
• 주의해야할 점은 children 을 props에 넣어줘야 JSX 오류가 안나타나게 된다.