[React] JSX란?

JSX(JavaScript XML)는 React에서 자바스크립트 안에서 HTML과 유사한 구문을 작성할 수 있게 해주는 문법 확장입니다. JSX는 브라우저에서 직접 실행되지 않고, React와 같은 프레임워크가 이를 JavaScript로 변환하여 실행합니다. JSX는 직관적인 UI 코드 작성을 가능하게 하며, React에서 컴포넌트를 정의하고 구성할 때 많이 사용됩니다.

 

JSX의 특징

• HTML과 비슷한 문법
  JSX는 HTML과 비슷하게 보이지만 실제로는 JavaScript입니다. 이를 통해 UI를 표현하는 코드와 비즈니스 로직이 가까이 위치할 수 있어 개발자가 더 직관적으로 UI 코드를 작성할 수 있습니다.

const element = <h1>Hello, World!</h1>;

 

• JavaScript와 결합 가능
  JSX 안에서 JavaScript 표현식을 사용할 수 있습니다. 중괄호 {}를 사용하여 JavaScript 값을 넣을 수 있으며, 변수, 함수 호출, 조건문 등을 JSX에서 바로 사용할 수 있습니다.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

 

• React 컴포넌트 사용
  JSX에서는 React 컴포넌트를 HTML 태그처럼 사용할 수 있습니다. 함수형 컴포넌트 또는 클래스형 컴포넌트 모두 JSX 안에서 마치 HTML 태그처럼 사용할 수 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="John" />;

 

• JSX 요소의 중첩 및 배열
  JSX에서는 여러 요소를 중첩하여 사용할 수 있으며, 여러 요소를 배열로 반환할 수도 있습니다. JSX 요소를 배열로 다룰 때는 고유한 key 속성을 제공해야 합니다.

const element = (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

const listItems = items.map((item) =>
  <li key={item.id}>{item.name}</li>
);

 

• JSX는 표현식을 반환
  JSX는 표현식(expression)으로 간주됩니다. 따라서, JSX를 함수의 반환값으로 사용할 수 있으며, 조건문이나 반복문에서도 사용할 수 있습니다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {user.name}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

• className 속성 사용
  JSX에서는 HTML의 class 속성을 className으로 작성해야 합니다. 이는 JavaScript에서 class가 예약어이기 때문입니다.

const element = <div className="myClass">Hello World</div>;

 

• JSX에서의 스타일 적용
  JSX에서 스타일을 적용할 때는 문자열이나 객체 형태로 적용할 수 있습니다. 객체 형태로 스타일을 작성할 때는 CSS 속성 이름이 카멜케이스(camelCase)로 변환되어야 합니다.

const element = <div style={{ color: 'blue', fontSize: '16px' }}>Hello World</div>;

 

• Self-closing 태그
  JSX에서는 HTML과 마찬가지로 닫는 태그가 없는 요소들(예: <img>, <br>, <input>)을 self-closing 태그로 작성해야 합니다. 즉, <img />처럼 슬래시(/)를 추가합니다.

const element = <img src="image.jpg" alt="An image" />;

 

 

JSX의 내부 동작 (Babel 변환)

JSX는 브라우저가 직접 이해할 수 있는 문법이 아니기 때문에, Babel 같은 트랜스파일러(SWC, esbuild 등)가 이를 순수한 JavaScript로 변환합니다. React 17부터는 import React from 'react';를 JSX 파일의 상단에 명시적으로 추가하지 않아도 되지만, 여전히 내부적으로는 JSX가 JavaScript로 변환될 때 React 객체가 사용됩니다.

 

JSX가 JavaScript로 변환되는 예

• JSX

const element = <h1>Hello, World!</h1>;

 

• 변환된 JavaScript

const element = React.createElement('h1', null, 'Hello, World!');

 

 

JSX의 장점

• 가독성
  HTML과 비슷한 문법을 사용하여 UI를 더 직관적으로 표현할 수 있어 코드의 가독성이 높아집니다.
• React의 강력한 기능 활용
  JavaScript와 완전히 통합되어 있어 동적인 UI를 쉽게 만들 수 있으며, React의 컴포넌트와 상태 관리 기능을 쉽게 결합할 수 있습니다.
• 유지보수성
  UI 코드와 비즈니스 로직이 함께 있으므로 유지보수에 용이하며, 컴포넌트를 재사용하기 쉬운 구조로 만들 수 있습니다.

 

 

JSX의 단점

• 복잡한 로직에서는 가독성 저하
  너무 많은 JavaScript 로직이 JSX 안에 들어가면 오히려 가독성이 떨어질 수 있습니다. 이럴 때는 JSX 로직을 잘 분리하거나, 헬퍼 함수를 사용하는 것이 좋습니다.
• 빌드 도구 필요
  JSX를 사용하려면 Babel과 같은 트랜스파일러(SWC, esbuild, Parcel 등)가 필요하며, 이는 초기 설정을 다소 복잡하게 만들 수 있습니다.

 

 

마무리

JSX는 React의 주요 특징 중 하나로, HTML과 JavaScript를 결합하여 더 직관적이고 강력한 사용자 인터페이스를 구축하는 데 도움을 줍니다. React와 함께 사용할 때의 장점이 매우 크기 때문에, 대부분의 React 개발자들이 JSX를 사용합니다.