react/only-export-components 제한

작동 방식

모듈이 리액트 컴포넌트(및 관련된 HMR 안전 항목)만 내보내도록 보장하여, 패스트 리프레시(즉, 핫 리로딩)가 컴포넌트 상태를 안전하게 유지할 수 있도록 합니다. 구체적으로, 모듈의 내보내기 형태와 일반적인 진입점(예: createRoot(...).render(<App />))을 검증하여, react-refresh와 같은 통합이 기대하는 형식과 일치하는지 확인합니다.

이 규칙은 eslint-plugin-react-refresh의 규칙을 기반으로 합니다.

왜 좋지 않은가?

패스트 리프레시는 모듈이 컴포넌트를 내보내고 리프레시 런타임을 혼란스럽게 하는 패턴을 피해야만 신뢰성 있게 상태를 유지할 수 있습니다. 문제가 되는 패턴(예: export *, 익명 기본 함수, JSX 컬렉션 배열 내보내기, 지원되지 않는 방식으로 비컴포넌트 내보내기를 섞기 등)은 다음과 같은 문제를 유발할 수 있습니다:

수정 시 컴포넌트가 재마운트되어 상태를 잃음
업데이트 누락(리프레시 없음) 또는 지나치게 광범위한 재로드
번들러 간에 다른 동작을 보이는 취약한 HMR 행동

예측 가능한 내보내기를 강제함으로써 개발 중에는 편집이 빠르고 상태 유지가 가능합니다.

예시

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

jsx

// 1) 유틸 내보내기와 컴포넌트를 지원되지 않는 방식으로 혼합
export const foo = () => {}; // 유틸, 컴포넌트가 아님
export const Bar = () => <></>; // 컴포넌트

jsx

// 2) 익명 기본 내보내기 (이름은 필수)
export default function () {}

jsx

// 3) 모든 것을 재내보내면 어떤 것이 내보내졌는지 숨겨짐
export * from "./foo";

jsx

// 4) JSX 컬렉션 내보내기는 컴포넌트 탐지 불가능하게 만듦
const Tab = () => null;
export const tabs = [<Tab />, <Tab />];

jsx

// 5) 컴포넌트를 정의하는 모듈 내부에서 루트를 부트스트랩
const App = () => null;
createRoot(document.getElementById("root")).render(<App />);

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

jsx

// 이름 붙은 또는 기본 컴포넌트 내보내기는 문제없음
export default function Foo() {
  return null;
}

jsx

// 옵션 또는 명명 규칙에 따라 허용되는 경우 유틸리티와 함께 존재 가능
const foo = () => {};
export const Bar = () => null;

jsx

// 진입점 파일은 가져온 컴포넌트를 렌더할 수 있음
import { App } from "./App";
createRoot(document.getElementById("root")).render(<App />);

구성

이 규칙은 다음 속성을 가진 구성 객체를 받습니다:

allowConstantExport

type: boolean

기본값: false

컴포넌트 내보내기와 함께 원시 상수(문자열/숫자/불린/템플릿 리터럴) 내보내기를 허용하고 위반 사항을 트리거하지 않음. 당신의 번들러의 패스트 리프레시 통합이 이를 지원하는 경우(플러그인의 vite 프리셋에 의해 활성화됨) 권장됩니다.

jsx

// allowConstantExport: true일 때 허용됨
export const VERSION = "3";
export const Foo = () => null;

allowExportNames

type: string[]

기본값: []

특정 이름 붙은 내보내기를 HMR 안전으로 간주합니다(핫 리플레이스를 수행하는 프레임워크에 유용). 예를 들어, Remix에서는 다음과 같이 사용합니다: { "allowExportNames": ["meta", "links", "headers", "loader", "action"] }

checkJS

type: boolean

기본값: false

.tsx/.jsx 외에도 .js 파일 내부의 JSX도 검사합니다. 잘못된 경고를 줄이기 위해, 이 옵션이 활성화되면 리액트를 가져오는 파일만 검사됩니다.

customHOCs

type: string[]

기본값: []

커스텀 고차 컴포넌트로 래핑된 컴포넌트를 내보낼 경우, 해당 식별자를 여기에 나열하여 오류 판단을 피할 수 있습니다.

사용 방법

이 규칙을 구성 파일 또는 CLI에서 활성화하려면 다음을 사용할 수 있습니다:

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/only-export-components": "error"
  }
}

bash

oxlint --deny react/only-export-components --react-plugin

참고 자료

규칙 소스

작동 방식 ​

왜 좋지 않은가? ​

예시 ​

구성 ​

allowConstantExport ​

allowExportNames ​

checkJS ​

customHOCs ​

사용 방법 ​

참고 자료 ​