“WebStorm에서 ‘React를 가져오지 않고 Jsx를 사용함’ 알림이 표시되는 이유
React와 JSX를 사용할 때 WebStorm에서 “React를 가져오지 않고 Jsx를 사용함” 알림이 표시될 수 있습니다. 이 알림은 WebStorm이 코드에서 React 라이브러리의 import를 감지하지 못한다는 것을 나타냅니다. 특히 JSX 문에서 해당됩니다.
이 알림은 불필요해 보일 수 있지만, React 컴포넌트의 원활한 작동과 JSX를 제대로 활용하기 위해 React를 import하는 것이 중요합니다.
알림 해결을 위한 React Import
WebStorm에서 “React를 가져오지 않고 Jsx를 사용함” 알림을 해결하려면 코드에서 명시적으로 React 라이브러리를 import해야 합니다. 이를 위해 몇 가지 다른 방법이 있습니다.
1. 각 파일에서 React import
가장 일반적이고 권장되는 방법은 알림을 피하기 위해 JSX 문을 사용하는 모든 파일에서 React 라이브러리를 import하는 것입니다. 파일의 맨 위에 다음 import 문을 추가합니다.
import React from 'react';이 import 문을 포함하면 WebStorm이 React를 import한 것을 인식하고 알림이 더 이상 표시되지 않습니다.
2. 전역적으로 React import
또는 WebStorm을 구성하여 전역적으로 React import를 인식하도록 설정할 수 있습니다. 이는 React를 모든 파일에서 import하는 것이 반복적이고 번거로운 대규모 프로젝트에서 특히 유용합니다. 다음과 같이 설정할 수 있습니다:
webpack.config.js 파일에서 React를 전역적으로 제공하도록 다음 플러그인을 추가합니다:
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
]그런 다음 declarations.d.ts 파일에서 React에 대한 전역 변수를 선언합니다:
import _React from 'react';
declare global {
const React: typeof _React;
}이 설정으로 WebStorm은 React의 전역 import를 인식하고 알림이 더 이상 표시되지 않습니다. 알림이 표시되더라도 React를 올바르게 구성한 경우 코드는 여전히 잘 작동합니다.
“React를 가져오지 않고 Jsx를 사용함” 검사 비활성화
알림을 전혀 보지 않으려는 경우, WebStorm에서 검사를 비활성화할 수 있습니다. 다음과 같이 진행합니다:
- Settings | Editor | Inspections | JavaScript and TypeScript | Imports and dependencies로 이동합니다.
- “Missing ‘React’ namespace import in JSX”라는 검사를 찾아서 끕니다.
또는 WebStrom의 최신 버전에서는 Editor > Inspections > JavaScript and TypeScript > Imports and dependencies > Missing ‘React’ namespace import in JSX에서 설정을 찾을 수 있습니다. 심각도 옵션을 “No highlighting”으로 선택하여 이 검사를 완전히 비활성화할 수 있습니다.
결론
WebStorm에서 ‘React를 가져오지 않고 Jsx를 사용함’ 알림은 JSX 구문을 사용할 때 React 라이브러리를 올바르게 import하는 것을 보장하기 위한 유용한 알림입니다. React를 각 파일에 import하거나 전역적으로 import하는 것은 중요하며, 코드에서 React 및 JSX를 최대한 활용하기 위해 이 import 문을 사용하는 것이 중요합니다.
