React - JSX

JSX (JacaScript XML)은 React에서 사용하는 특별한 문법으로

자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있도록 만든 기술이다.

일반적으로 자바스크립트에서 DOM을 조작할 때는

document.createElement 와 같은 메소드를 사용해야 하지만

JSX를 사용하면 HTML처럼 직관적으로 UI를 구성할 수 있다.

 

▶ JSX를 사용하지 않는 React 코드

JSX 없이 순수 자바스크립트로 React를 사용하려면

UI 요소를 만들 때 React.createElement()를 사용해야 한다.

그 예시는 다음과 같다.

import {createRoot} from "react-dom/client";

const element = React.createElement("h1",null, "Hello");
const root = createRoot(document.getElementById("root"));
root.render(element);

이 방식을 쓰게 된다면

React.createElement() 메소드를 계속 사용해야 해서 코드가 복잡해지고 길어지며

HTML 구조가 한눈에 보이지 않아 가독성이 떨어진다.

 

그렇다면 반대로 JSX를 사용한 React 코드는 어떨까?

 

▶ JSX를 사용한 React 코드

JSX를 사용하면 HTML 처럼 보이는 코드를 그대로 React 컴포넌트 안에서 작성할 수 있다.

import (...)

const element = <h1>Hello</h1>;

const root = createRoot(document.getElementById("root"));
root.render(element);

이러면 HTML과 유사한 문법이므로 읽고 이해하기 쉬우며

코드가 훨씬 간결하고 직관적이다.

 

하지만 JSX는 결국 자바스크립트 코드로 변환된다.

브라우저가 직접 이해할 수 있는 문법이 아니므로

React가 React.createElement() 형태로 변환하는데

const element = <h1>Hello</h1>;

이랬던 코드는 결국 변환 되어,

const element = React.createElement("h1",null,"Hello");

즉 JSX는 단순히 React 요소를 쉽게 작성할 수 있도록 도와주는 문법이다.

---

JSX 문법을 정리해보자면 다음과 같다.

 

1. 태그는 반드시 닫아야한다.

// 잘못된 태그 (닫혀있지 않음)
const element = <img src = "logo.png">;

// 올바른 태그 (닫음)
const element = <img src = "logo.png" />;

 

2. 여러 요소는 반드시 하나의 부모 태그로 감싸야 한다.

JSX에서는 여러 개의 요소를 직접 반환할 수 없다.

그러므로 반드시 하나의 부모 요소로 감싸야한다.

// 잘못된 태그 (부모 태그 없이 여러 요소 반환)
return (
   <h1>안녕하세요</h1>
   <p>반가워요</p>
 );

 

// 올바른 태그 (부모 태그로 감싸기)
return (
   <div>
     <h1>안녕하세요 </h1>
     <p>반가워요</p>
   </div>
 );

 

추가로 <>...</> 방식인 프래그먼트(Fragment)도 사용할 수 있다.

프래그먼트는 다음 글에서 자세히 다뤄보자

// 프래그먼트 방식 사용
return (
   <>
     <h1>안녕하세요</h1>
   </>
 );

 

3. 자바스크립트 표현식 사용이 가능하다 ( {} )

JSX 안에서 자바스크립트 변수를 중괄호로 감싸서 사용할 수 있다.

const name = "React";
const element = <h1>안녕하세요, {name}님</h1>;

const a = 10, b = 20;
const element = <h1> 10과 20을 더하면 {a + b} 입니다.</h1>

 

4. class 대신 className을 사용한다.

JSX는 자바스크립트 내부에서 동작하므로

HTML의 class 속성이 아닌 className을 사용해야 한다.

const element = <h1 className="title">Hello</h1>

그 이유는 간단하다.

자바스크립트에서는 class가 예약어이기 때문에 

JSX에서는 충돌을 방지하기 위해 className을 사용해야한다.

 

5. style 속성은 객체 형태로 작성한다.

JSX에서 style 속성을 사용할 때는 반드시 객체 형태로 작성해야 한다.

// 잘못된 예제 (일반 HTML 스타일 사용)
const element = <h1 style ="color:red; font-size: 20px;">Hello</h1>

// 올바른 예제 (객체 사용)
const element <h1 style={{ color: "red", fontSize: "20px" }}>Hello</h1>;

여기서 두 가지 주의해야할 점이 있는데

• 스타일 속성의 이름은 반드시 카멜케이스 (camelCase) 기법으로 작성해야한다 (font-size -> fontSize)
• 객체를 {} 로 감싸야하므로 중괄호를 두 번 사용해야한다.

6. 조건부 랜더링 (&&, ?:, if)

JSX 안에서 조건문을 사용할 때는 여러가지 방법이 있다.

 

 - && 연산자 사용

isLoggedIn이 true일 때만 <p>로그인 성공</p> 이 랜더링되는 코드

const isLoggedIn = true;

return (
  <div>
    <h1>어서오세요</h1>
    {isLoggedIn && <p> 로그인 성공</p>}
  </div>
 );

 

 

 - if 문은 JSX 밖에서 사용

JSX 안에서는 if 문을 직접 사용할 수 없기에 

JSX 바깥에서 미리 변수를 선언한 후 JSX에서 사용한다.

let message;
if (isLoggedIn) {
  message = <h1>안녕하세요</h1>;
} else {
  message = <h1>로그인하세요</h1>;
}

return <div>{message}</div>;

---

JSX를 정리하자면 다음과 같다.

• JSX는 자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있도록 만든 React의 문법이다.
• JSX는 결국 Reaxt.createElement()로 변환된다.
• 태그는 항상 닫아야 하며, 여러 요소는 부모 태그로 감싸야한다.
• JSX에서는 중괄호를 사용하여 자바스크립트 표현식을 사용할 수 있다.
• class 대신 className을 사용하며 style은 객체 형태로 작성 해야한다.
• 조건부 렌더링은 &&, ?:, if 문을 적절히 활용하여 사용할 수 있다.