React 개발의 핵심: JSX, 왜 사용해야 할까요?

React 개발에 입문하신 분이라면 JSX라는 용어를 많이 들어보셨을 겁니다. JSX는 JavaScript XML의 줄임말로, React에서 사용자 인터페이스(UI)를 구성하는 데 필수적인 구문 확장입니다. 마치 JavaScript 파일 안에 HTML을 작성하는 것과 같다고 이해하면 됩니다.

오늘은 JSX가 무엇이고, 왜 우리가 React 개발에서 JSX를 사용해야 하는지, 그리고 어떻게 작동하는지 자세히 알아보겠습니다.

---

JSX란 무엇이며, 왜 중요한가요?

JSX는 개발자가 JavaScript 파일 안에서 HTML과 유사한 코드를 작성할 수 있게 해주는 구문 확장입니다. React에서는 주로 UI의 구조를 정의하는 데 사용되며, 시각적 구조를 명확히 보여주어 코드의 가독성과 유지보수성을 높여줍니다.

복잡한 UI를 조금 더 직관적으로 표현하고 관리할 수 있다는 점에서 JSX는 React의 핵심 요소라고 할 수 있습니다.

---

728x90

JSX를 사용해야 하는 세 가지 핵심 이유

1. 선언적 구문: 무엇에 집중하는 개발

JSX는 UI가 어떻게 보여야 하는지를 명확하게 정의할 수 있도록 합니다.
DOM 조작을 위한 복잡한 JavaScript 코드 대신 HTML과 유사한 구문으로 의도를 표현할 수 있기 때문에, 개발자는 *"무엇을 보여줄지"*에 집중할 수 있습니다.

2. JavaScript와의 완벽한 통합: 동적인 UI 구현

JSX는 결국 일반 JavaScript 함수 호출로 변환됩니다.
따라서 JSX 안에 변수, 함수 호출 결과, 조건부 표현식 등을 직접 삽입할 수 있습니다. 이는 사용자 입력, 서버 데이터, 애플리케이션 상태에 따라 실시간으로 이용자에게 동적인 UI를 제공할 수 있게 해줍니다.

3. 향상된 가독성: 협업과 유지보수의 용이성

HTML 구조와 UI 로직이 결합되어 있어, 컴포넌트의 레이아웃과 동작을 한눈에 파악할 수 있습니다. 협업 시 코드 이해도가 높아지고, 신규 개발자가 프로젝트에 빨리 적응할 수 있다는 장점이 있습니다.

---

JSX는 어떻게 작동할까요?

JSX는 브라우저에서 직접 실행되지 않습니다.
대신, Babel 같은 트랜스파일러가 JSX 코드를 React.createElement() 함수 호출 형태의 표준 JavaScript 코드로 변환합니다.
따라서 브라우저는 변환된 JavaScript를 실행하여 실제 DOM을 구성합니다.

---

간단한 JSX 예시: Greeting 컴포넌트

import React from 'react';

const Greeting = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to learning about React!</p>
    </div>
  );
};

export default Greeting;

위 예시처럼 JSX에서는 HTML 태그를 그대로 사용할 수 있습니다. Greeting 컴포넌트는 해당 구조를 반환하고, React가 이를 랜더링합니다.

---

JSX에 JavaScript 표현식 삽입하기

JSX에서는 {} 중괄호 안에 JavaScript 표현식을 넣을 수 있습니다.

const UserGreeting = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>{name.length > 0 ? "Glad to see you!" : "Please log in."}</p>
    </div>
  );
};

위 코드처럼 props로 전달된 데이터를 직접 UI에 넣거나, 조건문을 통해 조건부 UI 렌더링을 간단하게 처리할 수 있습니다.

---

JSX의 속성 (Attributes)

JSX 속성은 HTML과 유사하지만 JavaScript의 규칙을 따르므로 camelCase 표기법을 사용합니다.

const Button = () => {
  return (
    <button className="btn" onClick={() => alert('Button clicked!')}>
      Click Me!
    </button>
  );
};

class가 아닌 className을 사용해야 하며, 이벤트 핸들러도 직접 속성으로 전달할 수 있습니다.

---

요소 렌더링하기

JSX로 정의한 컴포넌트를 DOM에 띄우려면 ReactDOM.render()를 사용합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting />, document.getElementById('root'));

위 코드에서는 Greeting 컴포넌트를 id="root"인 DOM 내부에 렌더링합니다.

---

결론

JSX는 React 개발에서 직관적이고 유지보수 가능한 UI 코드 작성 방식을 제공합니다. 선언적 구문, JavaScript 통합, 가독성 향상이라는 측면에서 React 개발의 핵심 도구입니다. JSX에 숙달된다면, React 컴포넌트 개발이 자연스럽게 제2의 천성이 될 것입니다.