← Back to rules

react/react-in-jsx-scope 의심스러움

작동 방식

JSX 구문을 사용할 때, React가 가져와지고 범위 내에 있어야 한다는 것을 강제합니다.

참고로, 새로운 JSX 전환을 사용하는 경우, React 17 이상에서는 이 규칙이 필요하지 않습니다. 이 규칙을 비활성화하고, JSX 구문을 포함하는 파일에서 React를 가져오지 않아도 됩니다.

만약 tsconfig.json에서 jsx가 react-jsx 또는 react-jsxdev로 설정되어 있다면, 새로운 JSX 전환을 사용하고 있습니다.
자바스크립트 프로젝트에서 Babel을 사용하는 경우, .babelrc 또는 babel.config.js에 있는 리액트 프리셋 구성에 runtime: "automatic"이 설정되어 있다면, 새로운 JSX 전환을 사용하고 있습니다.

자세한 내용은 리액트 블로그의 JSX 전환 소개 글을 참조하세요.

왜 나쁜가?

JSX를 사용할 때 <a />는 React.createElement("a")로 확장됩니다. 따라서 React 변수는 반드시 범위 내에 있어야 합니다.

예시

이 규칙에 부적절한 코드 예시:

const a = <a />;

이 규칙에 적절한 코드 예시:

import React from "react";
const a = <a />;

사용 방법

구성 파일이나 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "error"
  }
}

CLI

oxlint --deny react/react-in-jsx-scope --react-plugin

참고 자료

• 규칙 소스