타입스크립트와 프롭스를 이용해보자

App.tsx

import React from "react";
import Circle from "./Circle";

const App = () => {
  return (
    <div>
      <Circle borderColor="blue" bgColor="teal" />
      <Circle text="i'm here" bgColor="tomato" />
    </div>
  );
};

export default App;

Circle.tsx
import React, { useState } from "react";
import styled from "styled-components";

interface ContainerProps {
  bgColor: string;
  borderColor: string;
}

interface CircleProps {
  bgColor: string;
  borderColor?: string;
  text?: string;
}

const Container = styled.div<ContainerProps>`
  width: 200px;
  height: 200px;
  background-color: ${(props) => props.bgColor};
  border: 3px solid ${(props) => props.borderColor};
`;

const Circle = ({
  bgColor,
  borderColor,
  text = "default text",
}: CircleProps) => {
  const [value, setValue] = useState<string | number>("hi");

  return (
    <div>
      <Container bgColor={bgColor} borderColor={borderColor ?? "bgColor"}>
        {text}
        {value}
      </Container>
    </div>
  );
};

export default Circle;

interface PlayerShape {
  name: string;
  age: number;
}
const sayHello = (playerObj: PlayerShape) =>
  `Hello 나는 ${playerObj.name} + 나이는 ${playerObj.age}`;

sayHello({ name: "frank", age: 35 });