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

박혀누님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라먹는 Next.js(15+)

6.2) 스트리밍 1. 페이지 스트리밍 적용하기

컴포넌트 생성할때 React가 없습니다 type error질문입니다.

해결된 질문

24.09.27 16:36 작성

·

39

0

컴포넌트를 새로 만들때 자꾸 React가 없습니다란 TS에러가 납니다...

그래서 React를 import해주면 TS에러가 해결되는데 검색해봐도 모르겠어서 질문남깁니당

import React from 'react'

const Loading = () => {
  return(
    <div>
      Loading...
    </div>
  )
}

export default Loading;

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 09. 28. 12:58

안녕하세요 이정환입니다.

해당 오류는 타입스크립트 설정의 문제로 인해 발생하는 오류로 파일의 확장자를 "tsx"로 설정하시지 않았거나 혹은 tsconfig.json 컴파일러 옵션이 강의와 다르게 설정되어 있을 때 발생할 수 있습니다.

따라서 파일의 확장자가 tsx로 설정되어 있는지 확인해보신 다음, 문제 없다면 tsconfig.json 파일의 내용을 다음과 같이 설정하시기 바랍니다.

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

이렇게 설정했는데도 동일한 문제가 계속 발생한다면 혀누님의 VSCode가 사용하는 타입스크립트 버전이 잘못되었을 수도 있습니다. 우리 강의에서는 5 버전을 사용하고 있으니 버전도 한번 확인해보시면 좋겠습니다.

박혀누님의 프로필 이미지
박혀누
질문자

2024. 09. 28. 16:43

감사합니다~~

0

인프런 AI 인턴님의 프로필 이미지

2024. 09. 27. 16:41

안녕하세요, 인프런 AI 인턴입니다. 박혀누님.

컴포넌트를 생성할 때 React가 없습니다라는 TypeScript 오류를 해결하려면, 따로 React를 import 하지 않더라도 오류가 발생하지 않도록 설정할 수 있는 방법이 있습니다.

아래와 같이 TypeScript 설정 파일인 tsconfig.jsonjsx 옵션을 설정하면 됩니다:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

이렇게 하면 React를 import하지 않아도 됩니다. 그래도 문제가 해결되지 않는다면 직접 React를 import 하는 방법도 있습니다.

강의에서 컴포넌트 생성과 관련된 예를 다루는 부분이 있으니 한 번 참고해보시면 도움이 될 것입니다. 아래 유사한 질문에 대한 답변을 참고하시면 보다 자세한 설명을 확인할 수 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.