[tsconfig.json] 'React'는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.

문제 발생

React-Native를 Typescript로 프로젝트를 만들다가 다음과 같은 에러가 떴다.

'React'는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.

해결 방안

1. React를 import하기

JSX를 사용하고 있다면 파일 상단에 import React from 'react';를 추가한다.

1번 방안은 파일마다 import 해야 해서 불편하다.

2. Typescript, react-dom 버전 확인 + tsconfig.json 설정 확인하기

React 17 버전 이상부터는 new JSX transform을 지원해서 일일이 import문을 작성할 필요가 없다.
package.json을 열어 버전을 확인해보자.

나의 경우 react는 18버전이므로 조건 만족

tsconfig.json 파일을 열어 설정을 확인해보자.
"jsx": "react-jsx" 로 설정하고
"include": ["**/*.tsx"] 를 추가.

아래는 내 tsconfig.json 파일이다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "target": "esnext", // 최신 ECMAScript 문법을 사용
    "module": "esnext", // ESNext 모듈 시스템을 사용
    "lib": ["esnext", "dom"], // 최신 ECMAScript 및 DOM API 사용 가능
    "jsx": "react-jsx", // React Native에서 JSX를 사용할 수 있도록 설정

    "strict": true, // TypeScript의 엄격한 타입 검사를 활성화
    "noImplicitAny": true, // 암시적인 `any` 타입을 허용하지 않음 (타입을 명확히 지정해야 함)

    "moduleResolution": "node", // Node.js 스타일의 모듈 해석 방식 사용
    "allowSyntheticDefaultImports": true, // `import React from 'react'` 같은 구문을 허용
    "resolveJsonModule": true, // JSON 파일을 import 가능하게 함
    "isolatedModules": true, // 단일 파일 단위의 트랜스파일링을 강제하여 최적화
    "skipLibCheck": true, // `node_modules` 내 타입 선언 파일을 검사하지 않아 빌드 속도 향상

    "baseUrl": "./", // 기본 경로를 프로젝트 루트로 설정
    "paths": {
      "@/*": ["src/*"] // `@/components/Button` 같은 경로 단축(alias) 기능 제공
    }
  },
  "include": ["src", "App.tsx", "index.tsx", "eslint.config.mjs", "**/*.tsx"], // 프로젝트에서 TypeScript가 적용될 파일들
  "exclude": ["node_modules", "babel.config.js", "metro.config.js"] // 빌드 대상에서 제외할 파일들
}

include에 "**/*.tsx" 를 추가해서 해결됐다!