JSX란 무엇인가? React에서 JSX의 역할과 사용법에 대해 알아보자

React를 배우는 과정에서 가장 먼저 접하게 되는 개념 중 하나가 바로 JSX입니다. JSX는 React의 핵심적인 부분으로, UI를 정의하는 방식을 혁신적으로 변화시켰습니다. 이 글에서는 JSX가 무엇인지, 왜 React에서 중요한 역할을 하는지, 그리고 어떻게 사용하는지에 대해 자세히 살펴보겠습니다.

1. JSX란 무엇인가?

JSX는 "JavaScript XML"의 약자로, JavaScript 코드 안에 XML(또는 HTML)과 유사한 구문을 작성할 수 있게 해주는 문법 확장입니다. 쉽게 말해, JSX는 JavaScript 코드 내에서 HTML 요소를 직접 작성할 수 있게 해주는 도구입니다. React에서 UI를 구성할 때, JSX를 사용하면 코드가 더 직관적이고 가독성이 높아집니다.

JSX의 기본 구조

JSX는 기본적으로 HTML 태그를 JavaScript 코드 안에 직접 작성하는 방식입니다. 예를 들어, 일반적인 HTML에서는 다음과 같이 태그를 사용하여 구조를 정의합니다:

<div>
  <h1>Welcome to React!</h1>
</div>

React에서 JSX를 사용하면 같은 구조를 다음과 같이 표현할 수 있습니다:

const element = <h1>Welcome to React!</h1>;

위 코드에서 <h1> 태그는 JSX 구문을 사용하여 작성된 HTML과 유사한 코드입니다. 이 JSX는 결국 React가 DOM에 렌더링할 수 있는 형태로 변환됩니다.

2. JSX가 중요한 이유

JSX는 React의 핵심적인 역할을 합니다. React에서 JSX가 중요한 이유는 다음과 같습니다:

1) 가독성 향상

JSX는 JavaScript와 HTML을 결합한 형태로, 두 가지 언어를 한 파일에서 작성할 수 있게 해 줍니다. 이로 인해 UI 구성 요소가 어떻게 작동하는지 명확하게 이해할 수 있습니다. 예를 들어, 복잡한 UI를 만들 때 HTML 템플릿을 JavaScript 코드와 함께 작성할 수 있어, 전체적인 구조와 동작을 쉽게 파악할 수 있습니다.

2) 동적 UI 생성

JSX는 JavaScript의 변수와 표현식을 코드 안에 포함시킬 수 있는 장점이 있습니다. 이를 통해 동적이고 변경 가능한 UI를 쉽게 생성할 수 있습니다. 예를 들어, 아래와 같이 JavaScript의 변수 값을 JSX 내에서 출력할 수 있습니다:

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

위 코드는 name 변수가 변경되면 화면에 표시되는 값도 자동으로 업데이트됩니다. 이런 방식으로 동적인 사용자 인터페이스를 구축할 수 있습니다.

3) React와의 자연스러운 통합

React는 JSX를 내부적으로 React.createElement() 함수를 사용하여 변환합니다. 이 함수는 JSX 구문을 React 컴포넌트가 사용할 수 있는 JavaScript 객체로 변환합니다. 이는 React가 UI의 업데이트를 효율적으로 처리할 수 있도록 도와줍니다.

3. JSX 문법

1) HTML 태그 사용

JSX는 HTML처럼 보이지만, 실제로는 JavaScript의 구문입니다. 따라서 몇 가지 차이점이 존재합니다.

• class 대신 className: HTML에서는 class 속성을 사용하지만, JSX에서는 class가 JavaScript의 예약어이기 때문에 className을 사용합니다.

<div className="container">Hello, JSX!</div>

• style 속성: HTML에서 style을 문자열로 지정하는 방식과 다르게, JSX에서는 style 속성 값이 객체 형태로 전달됩니다.

const divStyle = {
  color: 'blue',
  backgroundColor: 'yellow'
};

<div style={divStyle}>Styled Div</div>;

2) 중괄호({}) 사용

JSX에서는 JavaScript 표현식을 중괄호 {}로 감쌀 수 있습니다. 이를 통해 변수나 함수 결과를 HTML처럼 보이는 코드 안에 포함시킬 수 있습니다.

const greeting = 'Hello, React!';
const element = <h1>{greeting}</h1>;

3) 컴포넌트 작성

JSX는 React 컴포넌트의 구조를 정의하는 데 사용됩니다. 컴포넌트는 재사용 가능한 UI 단위이며, JSX로 구성됩니다.

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

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

4) 자기 닫힘 태그

JSX에서는 <img>, <input>, <br>와 같은 HTML 태그를 작성할 때, 반드시 자기가 닫히는 태그로 작성해야 합니다.

<img src="image.jpg" alt="Image" />
<input type="text" />

4. JSX 변환 과정

JSX는 브라우저가 직접 이해할 수 있는 HTML 코드가 아니기 때문에, 웹팩(Webpack) 등의 빌드 도구를 사용해 JavaScript 코드로 변환해야 합니다. 이 과정은 Babel이라는 자바스크립트 컴파일러를 통해 이루어집니다.

JSX 변환 예시

다음은 JSX 코드가 변환되는 방식의 예시입니다:

JSX 코드

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

변환된 JavaScript 코드

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

React.createElement() 함수는 첫 번째 인수로 태그 이름을, 두 번째 인수로 속성(attributes)을, 세 번째 인수로 자식 요소들을 받습니다. JSX 코드가 이 형태로 변환되어 최종적으로 DOM에 렌더링됩니다.

5. JSX 사용의 장점

1) 직관적인 UI 작성

JSX는 HTML과 매우 유사한 구문을 사용하므로, HTML을 작성하는 것처럼 UI를 정의할 수 있습니다. 이로 인해 UI를 작성하는 데 익숙한 개발자들이 React로 쉽게 적응할 수 있습니다.

2) 코드의 가독성 향상

JSX는 HTML 구조와 JavaScript의 로직을 함께 작성할 수 있기 때문에, UI와 관련된 모든 코드가 한 곳에 모이게 됩니다. 이는 가독성을 높이고 유지보수를 쉽게 만듭니다.

3) 강력한 타입 체크 및 에디터 지원

JSX는 TypeScript와 함께 사용할 수 있으며, 강력한 타입 체크와 자동 완성 기능을 제공합니다. 이는 코드 작성 시 오류를 줄이고, 더 안전한 개발 환경을 만들어 줍니다.

6. JSX 사용 예시

예시 1: 동적 UI 업데이트

사용자의 입력을 받아서 동적으로 화면을 업데이트하는 예시입니다.

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <h1>Hello, {name || 'World'}!</h1>
    </div>
  );
}

export default Greeting;

위 코드에서 name 값이 변경될 때마다 화면에 동적으로 업데이트되는 모습을 볼 수 있습니다.

예시 2: 반복되는 UI 렌더링

배열을 사용하여 목록을 반복적으로 렌더링하는 예시입니다.

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];
  
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

배열 items의 각 항목을 <li> 태그로 감싸서 목록을 렌더링합니다. key 속성은 React가 각 항목을 고유하게 식별할 수 있게 도와줍니다.

예시 3: 조건부 렌더링

조건에 따라 다른 UI를 렌더링하는 예시입니다.

function StatusMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
    </div>
  );
}

위 코드에서는 isLoggedIn 값에 따라 다른 메시지를 렌더링합니다.

7. 결론

JSX는 React에서 UI를 구성하는 데 중요한 역할을 하며, 가독성과 유지보수성, 동적 업데이트 기능을 제공합니다. JSX는 JavaScript 코드 안에서 HTML처럼 보이는 코드를 작성할 수 있게 해 주지만, 실제로는 JavaScript로 변환되어 실행됩니다. React 개발에 있어 JSX를 잘 이해하고 활용하는 것은 매우 중요합니다.

JSX를 통해 React에서 더욱 직관적이고 효율적인 UI를 작성할 수 있으며, 복잡한 사용자 인터페이스를 쉽게 관리하고 업데이트할 수 있습니다. 이제 JSX를 활용