Styled component를 이용하여 React에서 CSS 효과를 줄 때, 항상 .jsx 파일로만 만들었는데, 이번에 처음으로 Typescript를 도입하여 .tsx 파일로 구현을 하던 도중, props의 자료형을 정의하지 않으면 빨간줄이 생기는 상황을 처음 맞닥뜨렸습니다.
앞으로 Typescript를 이용하며 자주 맞닥뜨리게 될 상황인 것 같아서 간단히 기록을 해놓으려고 합니다.
위 코드는 testComponent 라는 이름의 컴포넌트를 만든 .tsx 파일입니다.
.jsx 파일이었다면, defaultColor 라는 props로 전달할때, 빨간줄이 그어지지 않겠죠.
하지만 .tsx 파일은 자료형을 엄격하게 정의해줘야 하기 때문에, 빨간줄이 그어지며 밑과 같은 메세지가 보이게 됩니다.
구글링 결과, 이 props의 자료형을 명시해줘야 하는데, 이를 명시하는 위치는 아래와 같습니다.
CSS 를 적는 백틱스 (``) 바로 직전에 defaultProps라는 이름의 props의 자료형을 적어주면 빨간줄이 사라집니다.
Using styled components with Typescript, prop does not exist?
Here is my styled component. import * as React from 'react'; import styled from 'styled-components'; import { ComponentChildren } from 'app-types'; interface Props { children: ComponentChild...
stackoverflow.com
참고 URL 2 : https://styled-components.com/docs/api#styling-components
styled-components: API Reference
API Reference of styled-components
styled-components.com
'React' 카테고리의 다른 글
| useEffect의 빈 배열 dependency과 No dependency의 차이 (0) | 2023.04.02 |
|---|---|
| [React] 부모 컴포넌트에서 자식 컴포넌트의 함수 사용하기 (0) | 2022.10.09 |
| [React] useForm 훅의 register() 메소드는 input/select 태그에서만 사용 가능할까? (0) | 2022.07.15 |
