리액트 JSX 문법 규칙: 인라인 스타일링·className·닫는 태그·주석

리액트 JSX는 HTML과 비슷해 보이지만 몇 가지 중요한 규칙이 있습니다. 초보자가 자주 헷갈리는 인라인 스타일링, className, 반드시 닫는 태그, 주석을 정리했습니다. 이 규칙만 숙지해도 JSX 작성 시 오류를 줄이고, 코드 가독성을 높일 수 있습니다.

1. 인라인 스타일링은 카멜 표기법 사용

JSX에서 인라인 스타일링은 객체 형태로 작성해야 하며, CSS 속성은 카멜 표기법(camelCase)으로 바꿔야 합니다. 예를 들어, background-color → backgroundColor 로 작성합니다.

function InlineStyleExample() {
  return (
    <div style={{ backgroundColor: "lightblue", fontSize: "20px" }}>
      인라인 스타일링 예제
    </div>
  );
}

2. class 대신 className 사용

JSX에서는 class 키워드가 자바스크립트 예약어이기 때문에 className을 사용해야 합니다.

function ClassNameExample() {
  return (
    <h2 className="title">className 사용 예제</h2>
  );
}

3. 반드시 닫는 태그 사용

HTML에서는 <br>, <img> 같은 태그를 닫지 않아도 되지만, JSX에서는 반드시 닫는 태그를 사용해야 합니다.

function ClosingTagExample() {
  return (
    <div>
      <br />  {/* 줄바꿈 */}
      <img src="logo.png" alt="로고" />
    </div>
  );
}

4. JSX 주석 처리 방법

JSX 안에서는 {/* 주석 내용 */} 형식을 사용해야 합니다. HTML처럼 를 쓰면 오류가 발생합니다.

function CommentExample() {
  return (
    <div>
      {/* 이 부분은 주석입니다 */}
      <p>JSX 주석 예제</p>
    </div>
  );
}

5. 예제 JSX 코드

import React from 'react';

export default function JsxRules() {
  return (
    <div style={{ padding: "20px", backgroundColor: "#f9f9f9" }}>
      <h2 style={{ color: "teal" }}>
        JSX 문법 규칙: 인라인 스타일링·className·닫는 태그·주석
      </h2>

      {/* 1. 인라인 스타일링 (카멜 표기법) */}
      <div style={{ backgroundColor: "lightblue", fontSize: "18px", margin: "10px 0" }}>
        인라인 스타일링 예제 (backgroundColor, fontSize)
      </div>

      {/* 2. className 사용 */}
      <p className="jsx-text">
        class 대신 className 사용 예제
      </p>

      {/* 3. 반드시 닫는 태그 */}
      <div>
        <br /> {/* 줄바꿈도 닫아야 함 */}
        <img
          src="https://bluesharehub.com/wp-content/uploads/2023/07/BS_logo-160x40.png"
          alt="샘플 이미지"
          style={{ border: "1px solid #ccc" }}
        />
      </div>

      {/* 4. JSX 주석 */}
      {/* 아래 문장은 JSX 주석 예제 */}
      <p>이 문장은 JSX 주석 아래에 있는 문장입니다.</p>
    </div>
  );
}

▼ 실행 결과 화면