[React] JSX란?

React를 배우다 보면 가장 먼저 접하게 되는 것이 JSX(JavaScript XML)입니다. JSX는 JavaScript 파일 안에서 HTML처럼 보이는 코드를 작성할 수 있게 해주는 문법으로, React 컴포넌트를 보다 직관적으로 작성할 수 있도록 도와줍니다. 오늘은 JSX의 개념과 사용 방법, 장점 그리고 주의사항에 대해서 알아보도록 하겠습니다.

---

1. JSX란?

JSX는 JavaScript와 HTML을 결합한 문법으로, React 컴포넌트에서 UI를 정의할 때 주로 사용됩니다. 

JSX는 브라우저가 직접 실행할 수 없으므로 Babel과 같은 트랜스파일러를 통해 JavaScript로 변환됩니다.

변환된 코드는 React.createElement를 호출하는 형태로 컴파일됩니다.

 

# JSX 예시 코드
const element = <h1>Hello, JSX!</h1>;

# 변환된 코드
const element = React.createElement('h1', null, 'Hello', JSX!');

---

2. JSX의 특징

1) HTML과 유사한 문법

- JSX는 HTML을 작성하는 것처럼 직관적인 문법을 제공합니다.

function App() {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>React란 무엇일까요?</p>
    </div>
  );
}

 

2) JavaScript 표현식 사용

- 중괄호 {}를 사용하면 JavaScript 표현식을 삽입할 수 있습니다.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

 

3) 조건부 렌더링

특정 조건에 따라 화면에 표시할 내용을 변경할 수 있습니다. JavaScript의 삼항 연산자를 사용하여 조건부로 UI를 출력할 수 있습니다.

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

---

3. JSX의 장점

• 가독성 증가: HTML과 유사한 문법으로 코드를 쉽게 이해할 수 있습니다.
• React와의 최적화된 통합: React의 UI 렌더링과 JavaScript의 동적 기능을 자연스럽게 결합합니다.
• 디버깅 편리성: 명확한 구조와 오류 메시지를 제공해 디버깅이 수월합니다.

---

4. JSX 사용 시 주의 사항

1) 단일 루트 엘리먼트 필요

JSX 코드는 반드시 하나의 루트 엘리먼트를 반환해야 합니다.

* 루트 엘리먼트 : JSX에서 하나의 컴포넌트를 반환할 때 모든 내용을 감싸는 최상위 요소를 말합니다.

// 올바른 코드
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

// 잘못된 코드
return (
  <h1>Title</h1>
  <p>Content</p>
);

 

2) React 속성 사용

HTML 속성 대신 React에서 제공하는 속성을 사용해야 합니다.

ex) class > className

       for > htmlFor

return <label htmlFor="name">Name:</label>;

---

5. 실습

배열 데이터를 JSX로 출력해 보겠습니다.

function App() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <div>
      <h1>Fruits List</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

# 결과

Fruits List
- Apple
- Banana
- Cherry