[react-native] <Text> 컴포넌트 quick fix의 import가 되지 않는 현상 해결

 

React Native 프로젝트를 진행하다가, View 컴포넌트는 quick fix로 임포트가 잘 되는데 Text 컴포넌트만 위처럼 import가 제대로 되지 않는 현상이 발생하였다.

 

원래는 이렇게 'react-native' 에서 임포트해 오는 것을 기대하였지만 Text 컴포넌트만 왜 임포트가 안 될까

사실 해결책은 간단했다.

 

 

우선, 나의 TypeScript 프로젝트에 타입 정의 파일이 존재하지 않았기 때문에, 코드 에디터가 필요한 모듈 타입 정보를 인식하지 못해 생긴 문제였다.

이를 위해 react-native, @types/react-native 패키지를 설치해야 한다.

// npm
npm install react-native @types/react-native

// yarn
yarn add react-native @types/react-native

 

 

그 다음, tsconfig.json 파일에 다음과 같은 내용을 추가한다.

  "compilerOptions": {
    "lib": ["es6"],
    "esModuleInterop": true,
  }

• lib : ['es6'] 설정은 컴파일러에게 프로젝트에서 ES6 기능을 사용할 수 있다는 것을 알려줘 최신 JS 기능을 사용하도록 한다.
• esModuleInterop : true 설정은 CommonJS 모듈과 ES6 모듈 간의 상호 운용성을 가능하게 한다. RN이 Node.js 환경에서 실행되므로 상호 운용성이 필요하다.

 

tsconfig.json 설정을 바꿨다면 VSCode reload 해줄 것.

 

 

이러한 변경을 통해 TypeScript 컴파일러가 RN의 구성 요소와 모듈 시스템을 올바르게 인식할 수 있게 되었다.

 

 

---

레퍼런스

https://github.com/microsoft/TypeScript/issues/33511