Oxc
← Back to rules

react/jsx-curly-brace-presence 스타일

An auto-fix is available for this rule.

어떤 기능을 하나요 ​

리터럴만으로 충분한 경우 불필요한 JSX 표현식을 금지하거나, JSX 자식 또는 속성 내 리터럴에 대해 반드시 JSX 표현식을 요구합니다.

이 규칙을 통해 JSX 속성과/또는 자식에서 중괄호 사용 여부를 강제하거나, 불필요한 중괄호 사용을 금지할 수 있습니다.

불필요한 JSX 표현식이 발생하는 상황의 경우, 리액트 문서와 이 페이지의 JSX 주의사항를 참조하세요.

왜 문제가 되나요? ​

JSX 코드에 다양한 스타일을 사용하면 코드가 읽기 어려워지고 일관성이 떨어집니다.

코드 일관성은 가독성을 향상시킵니다. 이 규칙을 통해 속성과/또는 자식에서 중괄호 사용 여부를 강제하거나 금지함으로써 애플리케이션 전체에서 일관된 패턴을 유지할 수 있습니다.

규칙 세부 사항 ​

기본적으로 이 규칙은 속성과 자식 모두에서 불필요한 중괄호를 확인하고 경고합니다. 백워드 호환성을 위해, 기본적으로 속성 값이 JSX 요소인 경우는 제외됩니다.

중괄호 사용 여부를 강제하거나 불필요한 중괄호 사용을 금지하려면 다음 옵션 중 하나 이상을 지정할 수 있습니다:

  • 속성에 대한 중괄호 사용 여부
  • 자식에 대한 중괄호 사용 여부
  • 속성 값이 JSX 요소인 경우의 중괄호 사용 여부

또한 이러한 옵션들은 불필요한 중괄호 사용을 금지하거나 체크를 무시할 때도 동일하게 사용할 수 있습니다.

참고: 이 규칙을 객체로 구성하는 것을 매우 추천하며, "propElementValues"를 "always"로 설정해야 합니다. 속성 값이 JSX 요소인 경우 중괄호 생략 기능은 모호하고, 의도적으로 문서화되지 않았으며, 의존해서는 안 됩니다.

예시 구성 ​

jsonc
{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", { "props": <string>, "children": <string>, "propElementValues": <string> }]
  }
}

또는 다음과 같이 대체할 수 있습니다:

jsonc
{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", "always"], // 또는 "never" 또는 "ignore"
  },
}

수정 세부 사항 ​

옵션을 전달하여 수정을 수행할 경우, 다음과 같이 스타일 위반 사항이 해결됩니다.

  • always: JSX 속성을 중괄호/JSX 표현식으로 감싸고, 자식도 동일하게 이중 따옴표 포함하여 감싸기

  • never: JSX 속성과/또는 자식에서 중괄호 제거

  • 모든 수정 작업은 이중 따옴표를 사용합니다.

예시 ​

{ props: "always", children: "always" }로 구성했을 때 잘못된 코드 예시:

jsx
<App>Hello world</App>;
<App prop="Hello world">{"Hello world"}</App>;

이를 다음과 같이 수정할 수 있습니다:

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{"Hello world"}</App>;

{ props: "never", children: "never" }로 구성했을 때 잘못된 코드 예시:

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"} />;

이를 다음과 같이 수정할 수 있습니다:

jsx
<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

{ props: "always", children: "always", "propElementValues": "always" }로 구성했을 때 잘못된 코드 예시:

jsx
<App prop=<div /> />

이를 다음과 같이 수정할 수 있습니다:

jsx
<App prop={<div />} />

{ props: "never", children: "never", "propElementValues": "never" }로 구성했을 때 잘못된 코드 예시:

jsx
<App prop={<div />} />

이를 다음과 같이 수정할 수 있습니다:

jsx
<App prop=<div /> />

"always"로 구성했을 때 잘못된 코드 예시:

jsx
<App>Hello world</App>;
<App prop="Hello world" attr="foo">
  Hello world
</App>;

이를 다음과 같이 수정할 수 있습니다:

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"}>
  {"Hello world"}
</App>;

"never"로 구성했을 때 잘못된 코드 예시:

jsx
<App prop={"foo"} attr={"bar"}>
  {"Hello world"}
</App>

이를 다음과 같이 수정할 수 있습니다:

jsx
<App prop="foo" attr="bar">
  Hello world
</App>

특이 케이스 ​

수정 과정에서는 템플릿 리터럴, 따옴표로 둘러싸인 문자열, 이스케이프 문자를 포함한 문자열도 처리합니다.

  • 규칙이 불필요한 중괄호를 제거하도록 설정되어 있고, JSX 표현식 내 템플릿 리터럴에 식이 없을 경우, 경고를 발생시키고 이중 따옴표로 수정합니다. 예를 들어:
jsx
<App prop={`Hello world`}>{`Hello world`}</App>

는 다음과 같이 경고되고 수정됩니다:

jsx
<App prop="Hello world">Hello world</App>
  • 규칙이 중괄호 사용을 강제하도록 설정되어 있고, 문자열에 따옴표가 포함되어 있을 경우, 자식에는 이중 따옴표로 수정되며, 속성에는 일반적인 방식으로 수정됩니다. 또한 수정 시 이중 따옴표는 이스케이프 처리됩니다.

예를 들어:

jsx
<App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>

는 경고되고 다음과 같이 수정됩니다:

jsx
<App prop={'Hello "foo" world'}>{"Hello 'foo' \"bar\" world"}</App>
  • 규칙이 불필요한 중괄호(=JSX 표현식)를 제거하도록 설정되어 있고, 이를 변환해야 하는 특수 문자(예: 따옴표, 금지된 JSX 텍스트 문자, 이스케이프 문자, 또는 HTML 엔티티 이름처럼 보이는 문자 등)가 포함되어 있는 경우, 코드는 경고되지 않습니다. 왜냐하면 수정 후 코드의 가독성이 낮아질 수 있기 때문입니다.

"never"로 구성되어 있어도 올바른 코드 예시:

jsx
<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * 컨테이너 없이 공백을 삽입하는 방법은 없으므로, 이 경우 항상 허용됨.
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* 주석 */ <Bpp />}</App> // 주석 때문에 컨테이너 필요

사용하지 않을 때 ​

이 규칙을 사용하지 않는 경우는, 속성과/또는 자식 내 중괄호 사용 및 불필요한 JSX 표현식 사용에 대한 일관성 유지에 관심이 없을 때입니다.

구성 ​

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

children ​

타입: "always" | "never" | "ignore"

기본값: "never"

JSX 요소의 자식 콘텐츠에 대해 중괄호 사용 여부를 강제하거나 금지할지 여부.

  • never: 불필요한 중괄호를 금지합니다. 예: <Foo>I love oxlint</Foo>가 선호됨
  • always: 모든 경우에 중괄호를 강제합니다. 예: <Foo>{'I love oxlint'}</Foo>
  • ignore: 자식 콘텐츠에 대해 두 스타일 모두 허용

propElementValues ​

타입: "always" | "never" | "ignore"

기본값: "ignore"

  • ignore 또는 never로 설정 시, 다음 코드가 허용(또는 강제): <App prop=<div /> />;
  • always로 설정 시, 속성 값이 JSX 요소인 경우 중괄호가 필요합니다: <App prop={<div />} />;

참고: propElementValues를 always로 설정하는 것이 매우 추천됩니다. 속성 값이 JSX 요소인 경우 중괄호 생략 기능은 모호하며, 의도적으로 문서화되지 않았으며, 의존해서는 안 됩니다.

props ​

타입: "always" | "never" | "ignore"

기본값: "never"

JSX 요소의 속성에 대해 중괄호 사용 여부를 강제하거나 금지할지 여부.

  • never: 불필요한 중괄호를 금지합니다. 예: <Foo foo="bar" />가 선호됨
  • always: 모든 경우에 중괄호를 강제합니다. 예: <Foo foo={'bar'} />
  • ignore: 속성 값에 대해 두 스타일 모두 허용

사용 방법 ​

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

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-curly-brace-presence": "error"
  }
}
bash
oxlint --deny react/jsx-curly-brace-presence --react-plugin

참고 자료 ​

© 2026 VoidZero Inc. 및 Oxc 기여자.