React JSX

안녕하세요. 오늘은 리액트 JSX에 대해 알아볼게요.

 

 

 

JSX

 

JSX(JavaScript XML)은 자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있게 해주는 문법 확장이에요.

 

즉, 리액트에서 UI를 설계할 때 “화면 구조를 직관적으로 코드로 표현하기 위한 문법”이라고 이해하면 돼요.

 

기존의 React.createElement()를 직접 쓰는 대신,

HTML처럼 보이는 문법으로 더 가독성 좋고 직관적인 UI 코드를 작성할 수 있게 해 줘요.

 

 

 

JSX 필요성

 

기존 리액트 코드는 다음처럼 생겼어요. 

function Hello() {
  return React.createElement('h1', null, '안녕하세요!');
}

이 방식은 문법적으로는 정확하지만, HTML 구조를 한눈에 파악하기 어렵고 중첩이 많아지면 매우 복잡해져요.

 

JSX를 사용하면 이렇게 바뀌어요. 

function Hello() {
  return <h1>안녕하세요!</h1>;
}

두 코드를 비교해 보면 훨씬 간단하고,

 

“HTML처럼 작성하면서도 실제로는 자바스크립트가 해석할 수 있는 코드”가 될 수 있는 걸 볼 수 있어요.

 

 

 

JSX 특징

 

1. 단일 루트 노드

 

JSX로 작성된 컴포넌트는 하나의 최상위 요소만 반환해야 해요.

 

리액트가 UI를 렌더링 할 때 “어디서부터 어디까지”가 하나의 컴포넌트인지 구분해야 하기 때문이에요.

// ❌ 오류
return (
  <h1>제목</h1>
  <p>내용</p>
);

// ✅ 올바른 형태 (div로 감싸기)
return (
  <div>
    <h1>제목</h1>
    <p>내용</p>
  </div>
);

// ✅ 혹은 Fragment 사용
return (
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>
);

 

 

2. 태그 닫기 필수

 

SX는 모든 태그를 닫아야 해요.

HTML에서는 <img>처럼 단일 태그를 열기만 해도 되지만, JSX에서는 반드시 /로 닫아야 해요.

// ❌ 오류
<img src="bird.gif">

// ✅ 올바름
<img src="bird.gif" />

 

 

3. 대소문자 구분

 

JSX는 태그 이름의 대소문자를 구분하기 때문에 작성할 때 조심해야 해요.

 

태그 형태	의미
소문자 시작	HTML 기본 태그로 인식 (<div>, <p>, <img /> 등)
대문자 시작	사용자 정의 컴포넌트로 인식 (<Header />, <Img /> 등)

function Header() {
  return <h1>헤더</h1>;
}

function App() {
  return (
    <>
      <Header />  {/* ✅ 컴포넌트 */}
      <header />  {/* ❌ HTML로 인식됨 */}
    </>
  );
}

 

 

4. 속성과 이벤트의 이름 규칙

 

JSX는 HTML과 비슷하지만, 자바스크립트 문법 규칙을 따라가요.

항목	HTML	JSX
클래스 지정	class	className
인라인 스타일	문자열	객체 형태 {}
이벤트	onclick	onClick (camelCase)

<div className="box">박스</div>
<div style={{ color: 'red', backgroundColor: 'yellow' }}>스타일</div>
<button onClick={() => alert('클릭!')}>클릭</button>

 

 

5. JSX 내부에서 자바스크립트 사용

 

JSX에서는 HTML처럼 보이는 구조 안에 자바스크립트 코드를 섞어서 사용할 수 있어요.

 

이때 사용하는 문법이 바로 {} 중괄호예요.

 

// 예시: D_JSX 컴포넌트
function D_JSX() {
  const welcomeMsg = '환영합니다.';
  const greeting = (name: string) => `안녕하세요 ${name}님`;
  const userInfo = { name: '최광섭', age: 35 };

  const handleClick = (value: string) => {
    console.log(`${value}`);
  };

  const divStyle = {
    backgroundColor: 'orange',
    color: 'white',
    padding: '10px',
  };

  return (
    <>
      <div>JSX 문법</div>
      <p style={{ fontSize: '20px', color: 'orange' }}>안녕하세요.</p>

      <hr />
      <div>{welcomeMsg}</div>
      <div>{greeting('최광섭')}</div>
      <div>이름: {userInfo.name} / 나이: {userInfo.age}</div>

      <button onClick={() => handleClick('클릭')}>클릭해주세요</button>

      <div style={divStyle} id="divElement" className="divClassElement">
        div 요소 - style 속성 내부에 스타일 객체를 삽입
      </div>
    </>
  );
}

 

 

코드 해석

 

코드	설명
{welcomeMsg}	자바스크립트 변수 삽입
{greeting('최광섭')}	함수 실행 결과 삽입
{userInfo.name}	객체 속성 접근
onClick={() => handleClick('클릭')}	이벤트에 콜백 함수 전달
style={{ fontSize: '20px' }}	인라인 스타일은 객체 형태
className="divClassElement"	JSX에서 class 대신 className 사용

즉, JSX는 “HTML 안에 자바스크립트를 자연스럽게 섞을 수 있는 문법 구조예요.

 

 

 

JSX 동작

 

JSX는 브라우저가 직접 이해할 수 있는 문법이 아니에요.

따라서 빌드 과정에서 Babel 같은 트랜스파일러가 아래처럼 변환해요.

// 작성한 코드
return <h1>안녕하세요</h1>;

// 실제 변환 결과
return React.createElement('h1', null, '안녕하세요');

 

 

 

JSX 장점

 

JSX의 장점을 표로 정리해 봤어요.

장점	설명
가독성 향상	HTML 구조를 직관적으로 표현 가능
표현력 강화	JS 변수, 함수, 조건문, 반복문 등과 결합 가능
생산성 증가	UI 구조를 빠르게 작성 및 수정 가능
컴포넌트 구조와 궁합	함수형 컴포넌트 내에서 자연스럽게 UI 반환 가능

 

 

 

마지막으로 정리 요약표예요.

 

항목	내용
JSX란?	자바스크립트 내에서 HTML 구조를 작성할 수 있는 확장 문법
왜 사용하는가?	선언적 UI 작성, 가독성 향상, DOM 제어 단순화
핵심 규칙	① 단일 루트 노드 ② 태그 닫기 필수 ③ 대문자=컴포넌트 ④ 속성은 camelCase
JS 코드 사용법	{} 중괄호 안에서 변수, 함수, 표현식 삽입 가능
변환 결과	React.createElement() 함수로 변환되어 실행됨

 

 

 

여기까지 JSX에 대해 알아봤는데요. JSX는 “HTML을 닮은 자바스크립트”예요.

처음에는 낯설지만, 컴포넌트 구조를 눈으로 바로 확인할 수 있게 만들어주는 리액트의 핵심 문법이에요.

이제부터 JSX와 함께라면, UI를 “코드로 그린다”는 게 어떤 의미인지 직접 느끼게 될 거예요.