esModuleInterop: true 옵션 질문드립니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

타입스크립트 리액트 시작하기

해결된 질문

작성

125

강의 7:47

esModuleInterop 옵션을 true로 설정하게 되면
default export가 없는 client.d.ts에서 아래와 같은 형태로 값을 불러올 수 있다고 하셨는데 그렇다면 ReactDOM은 client.d.ts에서 어떤 값이 되는건가요?

import ReactDOM from "react-dom/client";

typescript

답변 2

이정환 Winterlood

지식공유자

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

우선 제가 질문을 정확히 이해한건지는 잘 모르겠습니다 😅
(client.d.ts라면 어떤 폴더 아래의 이 파일을 지칭하시는지 ... 또 esModuleInterope 옵션이 켜진 상태에서의 값을 의미하시는건지 추가적인 정보를 더 알려주시면 감사하겠습니다)

현재까지의 정보로 최대한 답변드리자면 ReactDOM은 해당 패키지의 index.d.ts 파일에서 다음과 같이 내보내지고 있습니다. 요 정보는 질문자님이 설치하신 react router dom 패키지 안에서 직접 살펴보실 수도 있으니 확인해보시는걸 추천드립니다.

export { HydratedRouter, RouterProvider, RouterProviderProps } from 'react-router/dom';
export * from 'react-router';

인프런 AI 인턴

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

강의에서 설명한 esModuleInterop 옵션은 TypeScript에서 CommonJS 모듈을 ES 모듈 시스템처럼 사용하는 데 도움을 주는 설정입니다. 즉, esModuleInterop: true를 설정하면 CommonJS 방식으로 작성된 모듈을 ES6의 import 구문을 통해 좀 더 자연스럽게 가져올 수 있습니다.

기본적으로 TypeScript는 import * as ReactDOM from 'react-dom/client'; 같은 형태로 가져와야 하지만, esModuleInterop: true 옵션을 사용하면 import ReactDOM from 'react-dom/client';와 같은 스타일로도 사용할 수 있게 됩니다. 이는 컴파일 과정에서 __importDefault 헬퍼 함수를 통해 default export의 모방이 이루어지도록 TypeScript가 자동변환해 주기 때문입니다.

ReactDOM의 역할

ReactDOM은 client.d.ts와 같은 타입 선언 파일 내에서 ‘ReactDOM’이라는 이름으로 선언된 객체나 함수를 지칭합니다. 이 객체는 ‘react-dom’ 라이브러리 내에서 기본적으로 제공하는 DOM 관련 기능들을 포함하고 있습니다. 실제로는 react-dom의 JavaScript 구현체가 default export를 제공하지 않지만, esModuleInterop 옵션으로 인해 이 차이를 투명하게 처리하여 개발자에게 사용 편의를 제공합니다.

이해를 돕기 위한 설명이 되었길 바랍니다. 추가적인 질문이 있으시면 주저하지 말고 입력해 주세요.

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

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

esModuleInterop: true 옵션 질문드립니다.

ReactDOM의 역할