[React] Styled-components+TypeScript Props 전달 시 부모 컴포넌트에서 에러가 발생할 경우

TypeScript와 Styled-components를 같이 사용하면서 아래와 같이 props 스타일을 지정해주었다.

 

(styles.button.ts)

export interface ButtonProps {
  size: string;
}

export const PrimaryButton = styled(StyledButton)<ButtonProps>`
  width: ${props => `${props.size === 'block' ? '100%' : 'auto'}`};
`;

 

(Login.tsx)

const Login = ({ size }: ButtonProps) => {
	// ...
	
    <PrimaryButton size={size} type="submit">
      Login
    </PrimaryButton>
}

 

 

 

그런데 자꾸 부모 컴포넌트에서 에러가 발생했다.

 

(App.tsx)

Property 'size' is missing in type '{}' but required in type 'ButtonProps'. ts(2741)

 

 

해당 에러가 발생한 원인은 props가 optional 하다는 걸 명시하지 않았기 때문이다. 쉽게 말해, size라는  props를 사용할 수도 있고 사용하지 않을 수도 있는데 무조건 사용하도록 되어있기 때문에 에러가 발생한 것이다.

 

아래와 같이 props 스타일을 지정했던 interface에 물음표 연산자(optional chaining)만 추가하면 간단하게 해결할 수 있다.

 

 

(styles.button.ts)

export interface ButtonProps {
  size?: string; // 여기
}

export const PrimaryButton = styled(StyledButton)<ButtonProps>`
  width: ${props => `${props.size === 'block' ? '100%' : 'auto'}`};
`;