← Back to rules

react/jsx-no-comment-textnodes 의심스러운

작동 방식

이 규칙은 JSX 문장에서 주석 문자열(// 또는 /*로 시작하는 것 등)이 실수로 텍스트 노드로 삽입되는 것을 방지합니다.

왜 문제가 되는가?

JSX에서는 중괄호로 감싸지 않은 모든 텍스트 노드는 렌더링될 리터럴 문자열로 간주됩니다. 이로 인해 텍스트에 주석이 포함되어 있을 경우 예기치 못한 동작이 발생할 수 있습니다.

예시

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

const Hello = () => {
  return <div>// 빈 div</div>;
};

const Hello = () => {
  return <div>/* 빈 div */</div>;
};

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

const Hello = () => {
  return <div>{/* 빈 div */}</div>;
};

사용 방법

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-comment-textnodes": "error"
  }
}

CLI

oxlint --deny react/jsx-no-comment-textnodes --react-plugin

참고 자료

• 규칙 소스