Typing the Props

평소에 하는대로 React 컴포넌트를 통해 props를 전달해봅시다.

import styled from "styled-components";

const Container = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${props=>props.bgColor};
`;

const Text = styled.h1``;

function Circle({bgColor}){
  return <Container bgColor={bgColor}/>
}

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

export default App;

타입 스크립트에서 이런식으로 작성하면 두 가지 문제점이 발생합니다.

1. props의 타입에 대한 문제
2. styled-components 내에서 작성한 props.bgColor의 타입에 대한 문제

1번을 해결하려면 props의 타입을 interface를 통해 정의해주면 됩니다.

interface CircleProps {
  bgColor: string;
}

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

2번의 경우 TypeScript에게 bgColor를 styled-component에게도 보내고 싶다고 알려줘야 합니다.
동일하게 interface를 작성하면 되지만 여기선 bgColor가 string 타입으로 동일하므로 CircleProps를 재사용 해봅시다.

const Container = styled.div<CircleProps>`
  width: 100px;
  height: 100px;
  background-color: ${props=>props.bgColor};
`;

이렇게 하면 모든 경고가 사라지고 화면이 렌더링 됩니다.

이번엔 컴포넌트 두개를 통해 하나는 사각형으로 하나는 원으로 출력해봅시다.
동일한 코드로 사각형을 두개 만들어주고, 하나는 원으로 깎아봅시다.

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

기존에 하던 것 처럼 TS에게 새로운 props이 들어왔으니 타입 힌트를 줘야겠죠?
interface에 새로운 props의 타입을 등록해줍니다.

interface CircleProps {
  bgColor: string;
  borderRadius: string;
}

그런데 이렇게 하면 첫 번째 도형에서 에러가 납니다.
Property 'borderRadius' is missing in type '{ bgColor: string; }' but required in type 'CircleProps'.

"CircleProps에서 borderRadius 타입 써놓고 왜 사용안하니?" 라는 내용입니다.
이를 해결해주려면 다음과 같이 물음표를 추가해주면 됩니다.

interface CircleProps {
  bgColor: string;
  borderRadius?: string;
}

이렇게 되면 기존에 string 타입으로만 정의된 borderRadius에 undefined 가 들어와도 허용하겠다는 뜻으로 변경됩니다.
CircleProps.borderRadius?: string | undefined

Optrinal Props

대분의 경우 컴포넌트의 Props와 Styled Components의 props가 같지는 않습니다.
연습을 위해 두개의 interface를 분리해준 상태로 다시 전체 코드를 봅시다.

import styled from "styled-components";

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

interface CircleProps {
  bgColor: string;
  borderRadius?: string;
}
const Container = styled.div<ContainerProps>`
  width: 100px;
  height: 100px;
  background-color: ${props=>props.bgColor};
  border-radius: ${props=>props.borderRadius};
`;

const Text = styled.h1``;

function Circle({bgColor, borderRadius}:CircleProps){
  return <Container bgColor={bgColor} borderRadius={borderRadius}/>
}

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

export default App;

만약 이렇게 작성하면 또 styled components 부분에서 에러가 발생할 것 입니다.
제가 ContainerProps에는 ?를 안줬거든요,

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

interface CircleProps {
  bgColor: string;
  borderRadius?: string;
}

배운지 하루차인 제 생각이지만 ? 기호를 남발해서 undefined를 허용해주는 것은 그다지 TS에서 지향해야 하는 방법은 아닐 것 같습니다.
애초에 TS를 쓰는 목적이 타입 어노테이션을 통해 컴파일 전에 에러를 방지하고자 하는 목적이 크니까요.

그렇다면 이 문제를 어떻게 해결할 수 있을까요?
에러가 나는 부분은 다음 코드입니다.

return <Container bgColor={bgColor} borderRadius={borderRadius}/>

borderRadius가 한쪽 Container에만 사용되고 있다고 찡찡대니까, default 값을 줘버리면 될 것 같네요.
다음과 같이 바꿔봅시다.

<Container bgColor={bgColor} borderRadius={borderRadius ?? "0px"}/>

이 코드는 borderRadius값이 존재하면 ??의 왼쪽인 borderRadius를 쓰고, 없으면 "0px"로 하겠다 라는 뜻입니다.

아니면 React Props를 전달할 때 default 값을 주는 방법도 좋겠네요!

function Circle({bgColor, borderRadius="0px"}:CircleProps){
  return <Container bgColor={bgColor} borderRadius={borderRadius}/>
}

두 가지 다 좋은 방법인 것 같습니다😊

주관적 후기

TypeScript를 배운 첫날인데 굉장히 마음에 들었습니다.
기존에 파이썬을 사용해서 동적 타이핑언어에 익숙해져 있기 때문에 TypeScript를 배우는 것이 꺼려졌는데 오히려 JS보다 훨씬 직관적이고 편했습니다.
애초에 JS는 에러가 엄청 불친절했는데 TS의 경우 매우 친절하게 에러를 알려주기 때문에 내가 뭘 잘못했는지 티칭받는 느낌이었습니다.

결론: TS 짱짱😊