인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

살찐호랑이님의 프로필 이미지
살찐호랑이

작성한 질문수

React 기반 Gatsby로 기술 블로그 개발하기

TypeScript 개발 환경 구성하기

Text.tsx 작성 시 오류 납니다.

작성

·

3.2K

1

import React, { FunctionComponent } from 'react' const Text: FunctionComponent = function ({ text }){ return

{text}

} export default Text

 

위와 같이 작성 시 text에 빨간 줄나오고

에러 로그는

'{text: string;}' 형식은 'IntrinsicAttributes &{ children?: ReactNode; }' 형식에 할당할 수 없습니다.

 'IntrinsicAttributes &{ children?: ReactNode; }' 형식에 'text' 속성이 없습니다.

라고 나옵니다.

확인 부탁드립니다.

 

답변 1

0

주현도님의 프로필 이미지
주현도
지식공유자

안녕하세요, vxvx0011님!

코드를 아래와 같이 수정해보시겠어요??

 

import React, { FunctionComponent } from 'react'

type TextProps = {
text: string
} const Text: FunctionComponent<TextProps> = function ({ text }) { return <div>{text}</div> } export default Text

 

Text 컴포넌트 Props에 대한 타입을 생성해준 뒤에 컴포넌트에 적용시켜주면 해결됩니다!

강의에 제대로 반영이 안된 것 같은데 빠르게 수정하겠습니다.

좋은 질문 남겨주신 점 감사드립니다!

안녕하세요. 정적 사이트를 만들어보고 싶어서 글을 보고 있는데, 저도 계속 오류가 발생하더라구요.

그래서, 오류 코드를 보니까 세미콜론(;)이 누락되서 오류가 발생했더라구요, 세미 콜론 혹은 줄 바꿈하면 에러 없이 Home 글자가 출력되는 것을 확인했습니다.

 

주현도님의 프로필 이미지
주현도
지식공유자

넵넵! 해당 강의에서는 Prettier를 통해 세미콜론 미사용 옵션을 걸어두었기 때문에 무조건 줄바꿈을 해야 오류가 뜨지 않습니다 ㅎㅎ

살찐호랑이님의 프로필 이미지
살찐호랑이

작성한 질문수

질문하기