JSX 문법 숙지: React에서 HTML과 JavaScript의 결합(2)

JSX 문법 숙지: React에서 HTML과 JavaScript의 결합

JSX(JavaScript XML)는 React에서 사용하는 특수한 문법으로, HTML과 JavaScript가 결합된 형태입니다. 이는 기존 HTML에서 불가능했던 동적인 요소를 쉽게 추가할 수 있게 해주며, JavaScript의 조건문, 반복문 등을 UI에 자연스럽게 적용할 수 있습니다. JSX를 잘 활용하면 코드의 가독성과 유지 보수성이 크게 향상됩니다.

이번 글에서는 JSX의 기본 개념과, 어떻게 HTML과 JavaScript를 결합하여 보다 동적인 UI를 만들 수 있는지 사례와 예제를 통해 살펴보겠습니다.

JSX 문법

---

1. JSX란?

JSX는 JavaScript XML의 약자로, JavaScript와 HTML을 결합하여 동적인 UI를 구성할 수 있는 문법입니다. React는 JSX 코드를 바탕으로 컴포넌트를 렌더링하며, 이를 통해 더욱 직관적인 코드를 작성할 수 있게 도와줍니다.

JSX의 특징

• HTML과 유사한 문법을 사용하지만, JavaScript 코드가 포함될 수 있습니다.
• JavaScript의 조건문, 반복문을 활용해 UI의 동적인 요소를 쉽게 제어할 수 있습니다.
• Babel을 통해 JSX는 브라우저에서 이해할 수 있는 JavaScript로 변환됩니다.

JSX 예시

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

 

위 코드는 HTML처럼 보이지만, 실제로는 JavaScript 문법을 따릅니다. 이 JSX 코드는 React.createElement 함수로 변환되며, 결국 React DOM에서 이를 해석하여 화면에 표시됩니다.

---

2. JSX와 HTML의 차이점

JSX는 HTML과 매우 유사하지만, 몇 가지 차이점이 존재합니다. 이러한 차이점을 이해하는 것이 JSX 문법을 제대로 활용하는 첫걸음입니다.

2.1 HTML 속성 vs. JSX 속성

HTML의 속성(attribute)과 JSX의 속성은 이름이나 동작 방식에서 차이가 있습니다.

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

<!-- HTML -->
<div class="container">Hello World</div>

<!-- JSX -->
<div className="container">Hello World</div>

• for vs. htmlFor: 마찬가지로, HTML의 for 속성은 JSX에서 htmlFor로 대체됩니다.

<!-- HTML -->
<label for="input">Name</label>

<!-- JSX -->
<label htmlFor="input">Name</label>

2.2 닫는 태그의 필요성

JSX에서는 모든 태그가 닫혀 있어야 합니다. HTML에서는 <img> 태그와 같이 닫지 않아도 되는 태그들이 있지만, JSX에서는 반드시 닫는 태그가 필요합니다.

// JSX에서는 모든 태그가 닫혀 있어야 함
<img src="image.jpg" alt="Example" />

---

3. JavaScript와 JSX의 결합

JSX의 진정한 강점은 JavaScript와의 자연스러운 결합에 있습니다. 이를 통해 기존의 HTML 코드에서는 불가능했던 다양한 동적인 UI를 쉽게 구현할 수 있습니다.

3.1 JavaScript 표현식

JSX 안에서는 JavaScript 표현식을 중괄호 {} 안에 삽입할 수 있습니다. 이를 통해 동적으로 값을 설정할 수 있습니다.

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

3.2 조건문 처리

기존의 HTML에서는 조건에 따라 다른 UI를 렌더링하는 것이 복잡했지만, JSX에서는 JavaScript의 삼항 연산자나 && 연산자를 사용해 쉽게 조건부 렌더링을 할 수 있습니다.

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
  </div>
);

위 코드에서는 isLoggedIn 상태에 따라 다른 메시지를 렌더링합니다. 기존 HTML에서는 이를 구현하려면 JavaScript로 DOM을 직접 조작해야 했지만, JSX에서는 간단한 삼항 연산자로 처리할 수 있습니다.

3.3 반복문 처리

React에서 리스트를 렌더링할 때, JavaScript의 map() 함수를 사용하여 반복적으로 컴포넌트를 렌더링할 수 있습니다.

const items = ['Apple', 'Banana', 'Orange'];

const element = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

 

위 코드에서는 items 배열을 map() 함수를 사용해 반복적으로 렌더링합니다. key 속성은 React가 각각의 리스트 항목을 고유하게 식별할 수 있도록 도와줍니다.

---

4. JSX의 장점

4.1 코드 가독성 향상

JSX는 HTML과 유사한 문법을 따르므로, 기존 HTML/CSS 개발자들에게 친숙하게 다가옵니다. 또한, JavaScript 표현식을 직접 사용할 수 있기 때문에, 동적인 UI 로직을 더 직관적으로 작성할 수 있습니다. 이로 인해 코드의 가독성이 크게 향상됩니다.

4.2 유지 보수성 향상

JSX는 컴포넌트 기반으로 UI를 설계하므로, 유지 보수가 용이합니다. 각 컴포넌트가 독립적으로 동작하며, 이를 조립하여 하나의 UI를 구성할 수 있습니다. 이는 코드를 모듈화하고, 복잡한 UI를 관리하는 데 적합한 방식입니다.

---

5. JSX 활용 예제

5.1 동적 데이터 렌더링

사용자가 입력한 데이터를 실시간으로 렌더링하는 예제를 살펴보겠습니다.

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>입력한 값: {inputValue}</p>
    </div>
  );
}

export default App;

 

이 예제에서 사용자가 입력한 값은 실시간으로 p 태그에 표시됩니다. JSX를 통해 UI와 로직이 자연스럽게 결합되어 동적인 렌더링이 가능합니다.

5.2 조건부 렌더링 예제

사용자가 로그인했는지 여부에 따라 다른 UI를 보여주는 조건부 렌더링 예제입니다.

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

export default Greeting;

---

결론

JSX는 React의 핵심적인 부분으로, HTML과 JavaScript를 자연스럽게 결합해 동적인 UI를 쉽게 구현할 수 있도록 도와줍니다. 전통적인 HTML보다 더 유연하게 조건문, 반복문을 적용할 수 있어 복잡한 UI 로직을 간결하게 작성할 수 있으며, 이를 통해 코드의 가독성과 유지 보수성을 크게 향상시킬 수 있습니다. React에서 JSX를 이해하고 활용하는 것은 효율적인 UI 개발의 중요한 첫걸음입니다.