typescript 공부1

import Circle from './Circle';

function App() {
  return (
    <div>
      <Circle bgColor="teal" />
      <Circle bgColor="tomato" />
    </div>
  );
}

export default App;

import styled from 'styled-components';

interface CircleProps {
  bgColor: string;
}

const Circle = ({ bgColor }: CircleProps) => {
  return <Container bgColor={bgColor} />;
};

const Container = styled.div<CircleProps>`
  width: 200px;
  height: 200px;
  background-color: ${({ bgColor }) => bgColor};
  border-radius: 100px;
`;

export default Circle;

Circle컴포넌트에서는 App컴포넌트에서 내려준 props의 형태를 정의해준다.

bgColor을 string값으로 받겠다고 정의했다.

{bgColor} : CircleProps는 props로 받은 bgColor은 CircleProps라는 interface를 따른 다는 것이고

이는 string값으로 받겠다는 뜻과 동일하다.

만약 이때 App.tsx에서 bgColor을 string이 아닌 다른 형태로 보내주려고 하면 App.tsx에서 밑줄이 그어지며 에러가 발생한다.

 

그리고 해당 props를 styledcomponents에도 정의해야하기 때문에 styled.div뒤에 <CircleProps>를 적어 해당 인터페이스 내부의 형태를 따르도록 한다.