TypeScript에서 Styled Components 사용하기

title_thumbnail(TypeScript에서 Styled Components 사용하기)

Table of Contents

제목: styled components와 Typescript에서 ‘prop이 존재하지 않음’ 오류 해결하기

styled components와 Typescript를 함께 사용할 때, “Property ‘propName’ does not exist on type ‘ThemedStyledProps<...>‘”라는 오류 메시지가 발생할 수 있습니다. 이는 꽤 괴롭지만 걱정하지 마세요 – 코드를 원활하게 실행할 수 있는 해결책이 있습니다. 이 블로그 포스트에서는 이 오류의 일반적인 원인을 알아보고 해결하는 다양한 방법에 대해 살펴보겠습니다.

오류 메시지 이해하기

Typescript에서 사용중인 styled component에서 특정 속성을 찾을 수 없을 때 이런 오류 메시지가 발생합니다. 일반적으로 그것은 컴포넌트의 props에 대한 인터페이스와 전달된 props 간의 불일치를 나타냅니다. 이 문제를 해결하는 몇 가지 가능한 해결책에 대해 알아보겠습니다.

해결책 1: 컴포넌트 정의 업데이트하기

오류를 해결하는 한 가지 방법은 컴포넌트 정의를 업데이트하여 명시적으로 prop 타입을 지정하는 것입니다. 다음과 같이 제네릭 타입 매개변수를 사용하여 styled 함수를 사용할 수 있습니다:


const HeadingStyled = styled("h2")<{ emphasized: boolean }>`
    ${props => props.emphasized && `
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
    `}
`;

이 접근 방식은 ’emphasized’ prop이 컴포넌트 내에서 올바르게 인식되고 타입이 지정되도록 합니다.

해결책 2: 추가 Prop 타입 정의하기

여러 개의 props를 가지고 있거나 더 청결한 방법을 선호하는 경우, styled component를 위해 명확한 인터페이스를 정의할 수 있습니다. 관련 있는 모든 prop 타입을 포함하는 인터페이스를 생성함으로써 잠재적인 혼동을 피할 수 있습니다:


interface IHeadingStyled {
   emphasized: boolean;
}

const HeadingStyled = styled("h2")<IHeadingStyled>`
    ${props => props.emphasized && `
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
    `}
`;

이 접근 방식을 사용하면 여러 개의 prop을 처리해야 할 경우 보다 조직화되고 유지 관리가 용이한 코드베이스를 구축할 수 있습니다.

추가 고려사항

Emotion과 같은 다른 CSS-in-JS 라이브러리를 사용하는 경우, 위에서 논의한 원칙과 해결책을 일반적으로 적용할 수 있습니다. 사용하는 라이브러리에 맞게 구체적인 구문을 조정해야 합니다.

이 블로그 포스트에서 언급한 해결책을 따르면 styled components와 Typescript에서 “prop does not exist” 오류를 해결할 수 있습니다. 오류 메시지를 분석하고 컴포넌트 정의를 업데이트하거나 필요에 따라 추가적인 prop 타입을 정의하는 것을 기억하세요.

즐거운 코딩하시고, styled components가 Typescript와 매끄럽게 작동하길 바랍니다!

참고 자료 :

reactjs