React ClassName 명명 규칙

React className 네이밍 규칙

React JSX에서 CSS 클래스 네임에 대한 네이밍 규칙을 결정할 때 고려해야 할 몇 가지 옵션들이 있습니다. 이 블로그 포스트에서는 React 컴포넌트에서 클래스 네임의 권장 사례를 살펴보겠습니다.

컴포넌트 이름은 PascalCase

우선적으로, React 컴포넌트의 네이밍에는 PascalCase를 사용하는 것이 중요합니다. 이 규칙은 컴포넌트를 일반 HTML 요소와 구분하고 코드베이스를 더 가독성 있고 유지보수하기 쉽도록 도와줍니다.

import React from 'react';

const MyComponent = () => {
  return (
    <div className="MyComponent">
      /* 컴포넌트 내용 */
    </div>
  );
};

PascalCase 규칙을 따르면 코드에서 컴포넌트를 명확하게 식별할 수 있으며 HTML 요소와의 네이밍 충돌을 피할 수 있습니다.

어트리뷰트와 인라인 스타일은 CamelCase

className이나 style과 같은 어트리뷰트의 경우 camelCase를 사용해야 합니다. 예를 들어:

<div className="myClass">안녕, 세상!</div>

<div style={{ color: 'blue', backgroundColor: 'black' }}>인라인 스타일이 좀 있어</div>

camelCase 규칙은 JavaScript 구문과 일관성을 유지하며 코드베이스 전반에서 일관성을 유지할 수 있습니다.

복잡한 네이밍에는 BEM 고려

복잡한 스타일이나 다양한 요소 또는 수정자가 있는 컴포넌트의 경우 BEM (Block__Element–Modifier) 네이밍 규칙을 따르는 것이 유용할 수 있습니다. BEM은 컴포넌트 내부의 클래스 네임에 명확하고 구조화된 포맷을 제공하여 네이밍 규칙을 일관성 있게 유지하는 데 도움을 줍니다.

import React from 'react';
import './MyComponent.css';

const MyComponent = () => {
  return (
    <div className="MyComponent">
      <div className="MyComponent__Icon">아이콘</div>
      /* 다른 컴포넌트 요소들 */
    </div>
  );
};

BEM을 사용하면 컴포넌트 내부의 개별 요소를 쉽게 찾고 스타일링할 수 있으며 일관된 네이밍 규칙을 유지할 수 있습니다.

선택은 당신에게 달렸습니다

React에서 CSS 클래스 네임의 네이밍 규칙은 개인의 선호도나 팀 또는 프로젝트 내에서의 일관성에 따라 결정됩니다. PascalCase와 BEM과 같은 확립된 규칙을 따르면 코드를 더 가독성 있고 유지보수하기 쉽게 만들 수 있지만, React 자체에서 강제하는 엄격한 규칙은 없습니다.

코드베이스에서 일관성, 가독성, 유지보수성을 우선시하고, 프로젝트의 필요에 맞는 규칙을 선택하십시오.

여러분의 React 프로젝트에서 CSS 클래스 네임에 어떤 네이밍 규칙을 사용하시나요? 아래 댓글에서 의견을 공유해주세요!

참고 자료 : 

reactjs