📋 props 타입 지정하기
리액트와 타입스크립트를 함께 사용하는 환경에서 props를 스타일 컴포넌트에 넘겨줄 때 타입을 지정하지 않으면 오류가 발생하는 것을 알게 되었다.
타입스크립트 환경에선 props의 타입 지정이 필요하다는 것을 알게 되었고 이 내용을 정리해보고자 한다.
props 개수에 따른 타입 지정 방식
단일 props 사용하는 경우
styled.div<{프롭스명 : 타입}>다수 props 사용하는 경우
styled.태그명<인터페이스명>하고자 하는 내용은 아래와 같다.
App.tsx
-- Circle.tsx (스타일 컴포넌트 렌더링)
- App.tsx
const App = () => {
return (
<div>
<Circle bgColor="pink"/>
</div>
)
}- Circle.tsx
interface CircleProps {
bgColor : string
}
const Container = styled.div<CircleProps>`
width: 200px;
height: 200px;
border-radius: 50%;
background-color: ${(props) => props.bgColor};
`;
const Circle = ({bgColor} : CircleProps) => {
return (
<Container bgColor={bgColor}/>
)
}위 과정을 설명하자면 App.tsx에서 Circle.tsx로 props를 전달한다.
Circle 컴포넌트는 전달받은 props를 스타일 컴포넌트로 2차 전달한다.
리액트라면 타입을 지정해주지 않아도 되지만 타입스크립트에선 필수로 지정해줘야 하기 때문에 객체 모양을 나타내는 인터페이스를 props의 타입으로 지정해주었다.
스타일 컴포넌트에 인터페이스 타입을 지정하려면 styled.태그<인터페이스> 방식으로 사용하면 된다.
참고
