Styled-component typescript Props 받기

프로젝트를 진행하는데 JS로 개발을 할 때에는 styled-component에 props를 전달해주는데 에러가 없었는데 TypeScript로 개발을 함에 있어서 에러가 발생하였다. 에러는 Property 'height' does not exist on type 였다.

이는 props로 받는 값의 타입이 지정되어있지 않다는 뜻인걸 바로 알아차렸지만 어떻게 타입을 적용 시킬지에 대해 찾아보았다.

 

1) 단일 props 사용시

• styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다.
• 컴포넌트에 타입지정할때는 styled.div<인터페이스명> 와 같이 사용한다.

// styled-components에 1개 props 타입지정
// const Container = styled.div< {프롭스명 : 타입지정} >`
const ImgaeListWrapper = styled.div<{ height: string }>`
  margin-top: 20px;
  width: 860px;
  height: ${props => props.height};
`;

2) 다수 props 사용시: interface 작성

• 인터페이스로 분리하여 타입지정하는 것 이외에 사용법은 동일!

// Container styled-components에 적용할 interfacer를 작성
interface Container extends 상속타입 {
  isActive: boolean;
  height: string;
  프롭스명: 타입지정;
}
// styled-components에 interface 타입 지정하기
const ImgaeListWrapper = styled.div<Container>`
  margin-top: 20px;
  width: 860px;
  height: ${props => props.height};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

3) 상속 컴포넌트에 타입지정

• interface 상속받기

// 상속컴포넌트의 타입 상속받기
interface Container {
  isActive: boolean;
  height: string;
  프롭스명: 타입지정;
}

// 상속받은 컴포넌트에 타입 추가하기
const Container = styled(상속받을 컴포넌트명)<Container>`
  margin-top: 20px;
  width: 860px;
  height: ${props => props.height};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

 

이처럼 단일 props, 다수 props, interface 상속 등 3가지의 방법이 있었다.

나는 하나의 props만 받아오기 때문에 단일 props로 문제를 해결할 수 있었다.

 

 

참고문헌 : https://velog.io/@hwang-eunji/styled-component-typescript