← Back to rules

react/display-name Pedantic

어떤 기능을 수행하나요?

리액트 컴포넌트가 displayName 속성을 가져야 함을 강제합니다.

왜 문제가 되나요?

리액트 개발 도구(DevTools)는 컴포넌트 트리에서 컴포넌트 이름을 표시하기 위해 displayName을 사용합니다. displayName이 없으면 개발 도구에서 컴포넌트는 "알 수 없음(unknown)"으로 표시됩니다.

예시

이 규칙에 적합하지 않은 코드 예시:

const MyComponent = () => <div>Hello</div>;

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

const MyComponent = () => <div>Hello</div>;
MyComponent.displayName = "MyComponent";

구성

이 규칙은 다음 속성을 가진 구성 객체를 수락합니다:

checkContextObjects

type: boolean

기본값: false

true로 설정된 경우, displayName이 없는 컨텍스트 객체에 대해 경고합니다.

displayName을 사용하면 컨텍스트 이름 지정이 가능합니다. 이 이름은 리액트 개발 도구에서 컨텍스트의 Provider 및 Consumer에 사용됩니다.

ignoreTranspilerName

type: boolean

기본값: false

true로 설정된 경우, 변환기(transpiler)가 설정한 이름을 무시하고, 이 경우 반드시 displayName 속성이 있어야 한다고 요구합니다.

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/display-name": "error"
  }
}

CLI

oxlint --deny react/display-name --react-plugin

참고자료

• 규칙 소스