JSX

#it #jsx #react #javascript #프론트엔드 #frontend

기본 정보

명칭: JSX
영문명: JavaScript XML
분류: JavaScript 문법 확장(Syntax Extension)
개발사: Meta (Facebook)
주요 용도: React 컴포넌트 UI 작성
관련 주제: #JSX #React #JavaScript #Frontend

개요

JSX(JavaScript XML)는 JavaScript 코드 안에서 HTML과 유사한 문법으로 UI를 작성할 수 있도록 만든 문법 확장(Syntax Extension) 이다.

React에서 가장 많이 사용되며, 브라우저가 직접 실행하는 것이 아니라 Babel 등의 트랜스파일러를 통해 일반 JavaScript 코드로 변환된 후 실행된다.

HTML처럼 보이지만 실제로는 JavaScript 표현식이다.

JSX 구조

JSX 코드

↓

Babel

↓

JavaScript

↓

React

↓

DOM 렌더링

동작 과정

JSX 작성

↓

컴파일(Transpile)

↓

React.createElement()

↓

Virtual DOM 생성

↓

실제 DOM 업데이트

기본 문법

function App() {

  return <h1>Hello JSX</h1>;

}

HTML과 비슷하지만 JavaScript 코드 안에서 작성된다.

JavaScript와 비교

JavaScript

const element = document.createElement("h1");

element.innerText = "Hello";

JSX

const element = <h1>Hello</h1>;

더 직관적이고 읽기 쉽다.

변수 출력

const name = "구름";
<h1>
{name}
</h1>

중괄호 {} 안에서 JavaScript 표현식을 사용할 수 있다.

계산식

const a = 10;
const b = 20;

<p>
{a + b}
</p>

결과

조건부 렌더링

{
isLogin ? <p>로그인</p> : <p>로그아웃</p>
}

삼항 연산자를 자주 사용한다.

논리 연산자

{

isAdmin && <p>관리자</p>

}

조건이 참일 때만 렌더링된다.

반복 출력

users.map(user => 
<li>
{user.name}
</li>

)

React에서는 map()을 사용하여 목록을 출력하는 경우가 많다.

Key

users.map(

user =>

<li key={user.id}>
{user.name}
</li>

)

반복 렌더링 시 key 속성을 지정하는 것이 권장된다.

속성(Attribute)

<img src="logo.png" alt="Logo"/>

HTML과 유사한 방식으로 속성을 지정한다.

className

HTML의 class 대신 className을 사용한다.

<div className="box"></div>

htmlFor

HTML의 for 대신 htmlFor를 사용한다.

<label htmlFor="name">

이름

</label>

스타일 적용

<div style={{color:"red", fontSize:"20px"}}>
Hello
</div>

스타일은 객체(Object) 형태로 작성한다.

이벤트

<button onClick={save}>
저장
</button>

React 이벤트는 Camel Case를 사용한다.

컴포넌트 사용

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

<Header />

사용자 정의 태그처럼 사용할 수 있다.

Fragment

<>

<h1>제목</h1>

<p>내용</p>

</>

불필요한 div 없이 여러 요소를 반환할 수 있다.

JSX 규칙

하나의 부모 요소만 반환
태그는 반드시 닫기
class 대신 className 사용
for 대신 htmlFor 사용
JavaScript는 {} 안에서 작성
스타일은 객체(Object) 형태 사용

Babel 변환

JSX

<h1>
Hello
</h1>

변환 후

React.createElement(
"h1",
null,
"Hello"
);

브라우저는 변환된 JavaScript를 실행한다.

JSX와 HTML 차이

JSX	HTML
JavaScript 표현식	마크업 언어
className 사용	class 사용
htmlFor 사용	for 사용
Camel Case 이벤트	소문자 이벤트
Babel 변환 필요	브라우저 직접 해석

대표 활용 분야

React
Next.js
React Native
관리자 페이지
SPA
SaaS
ERP
대시보드

장점

HTML과 유사한 문법
코드 가독성 우수
JavaScript와 자연스럽게 결합
컴포넌트 기반 개발에 적합
유지보수가 쉬움

단점

초보자에게 HTML과 혼동될 수 있음
Babel 등 빌드 과정이 필요
React 문법 이해가 필요
JavaScript 지식이 요구됨

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

컴포넌트는 PascalCase로 작성
반복 렌더링 시 key 지정
조건부 렌더링은 삼항 연산자 또는 && 활용
인라인 스타일보다 CSS Module 또는 Tailwind CSS 사용
JSX 내부에서 복잡한 로직은 함수로 분리
Fragment(<>...</>) 적극 활용
이벤트 핸들러는 별도 함수로 관리
Props와 State를 명확히 구분
TypeScript와 함께 사용하여 타입 안정성 확보
ESLint와 Prettier 적용

JSX와 함께 사용하는 기술

대표 활용 사례

React 컴포넌트 작성
Next.js 페이지 개발
관리자 대시보드
쇼핑몰 UI
블로그 화면 구성
SPA 개발
모바일 웹
React Native 화면 구성

출처

React 공식 문서
Babel 공식 문서
Meta React Learn

JSX