[React] JSX는 무엇인가?

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트를 통해 UI를 모듈화 하고 재사용할 수 있는 강력한 기능을 제공합니다. 그 중심에 있는 것이 바로 JSX (JavaScript XML)입니다. JSX는 HTML과 매우 유사한 문법을 사용하여 React 컴포넌트를 작성할 수 있도록 도와줍니다.

이 글에서는 JSX의 주요 문법과 특징, 그리고 React에서 JSX가 왜 중요한지에 대해 설명하겠습니다.

 

 

JSX - 커버 이미지

React JSX 문법에 대한 이해

목차

1. JSX란 무엇인가?

2. JSX 특징

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. JSX란 무엇인가?

JSX는 JavaScript 코드 내에서 HTML과 같은 문법을 사용하게 해주는 확장 문법입니다. React는 JSX를 사용하여 UI를 정의하고, 이를 JavaScript 객체로 변환하여 효율적인 DOM 조작을 가능하게 합니다.

const element = <h1>React JSX!</h1>;

 

위 코드에서 h1 태그는 마치 html 코드처럼 보이지만, 실제로는 JavaScript 안에서 동작하는 JSX 문법입니다.

2. JSX 특징

2.1. 태그 닫기

JSX에서 사용되는 모든 태그는 반드시 닫혀 있어야 합니다. HTML에서 img 또는 br 같은 태그는 닫지 않아도 되지만, JSX에서는 셀프 클로징 태그를 사용해야 합니다. ( <img /> , <br />)

// HTML 스타일
const element = <img src="image.jpg">

// JSX 스타일
const element = <img src="image.jpg" />;

2.2. 속성명

2.2.1. 속성명에 자바스크립트 예약어 사용 불가

JSX 문법도 결국은 자바스크립트 문법이기 때문에, for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다.

• className : html의 class와 같은 속성
  

  const element = <div className="box">Box</div>;

• htmlFor : html의 for와 같은 속성
  

  <label htmlFor="name">이름</label>
  <input id="name" className="name-input" type="text" />

2.2.2. 속성명은 카멜 케이스(Camel Case)로 작성

여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case)로 작성해야 합니다.

카멜 케이스 : 단어 연결 시 첫 글자(소문자)를 제외한 각 단어의 첫 글자를 대문자로 표기하는 명명 규칙

// 카멜 케이스 예시
<div className='box'>Box</div>
<button onClick={...}>클릭!</button>

 

data-* 속성의 경우 예외적으로 기존 html 속성을 그대로 사용한다.

<div className="color-red" data-color="red">빨강</div>
<div className="color-blue" data-color="blue">파랑</div>

 

2.2.3. Fragment (반드시 하나의 요소로 감싸기)

JSX 문법을 활용할 때는 반드시 하나의 요소로 감싸주어야 합니다. 여러 개의 요소를 하나의 요소로 감싸지 않고 작성하면 오류가 발생합니다.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <h1>React JSX!</h1> // 에러 발생: JSX 식에는 부모 요소가 하나 있어야 합니다.ts(2657)
  <div>JSX</div>
);

 

에러를 해결하기 위해 div 태그로 감싸주면 의미 없는 부모 요소가 생깁니다.

import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>
    <h1>React JSX!</h1>
    <div>JSX</div>
  </div>
);

 

이때 Fragment를 사용하면 됩니다.

Fragment : 단일 요소가 필요한 상황에서 요소를 감싸서 그룹화해주는 요소입니다.
<Fragment></Fragment>로 사용하지만, 축약형으로 <></> 이렇게도 사용할 수 있습니다.

 

// 일반 사용법
<Fragment>
  <h1>React JSX!</h1>
  <div>JSX</div>
</Fragment>

// 축약형
<>
  <h1>React JSX!</h1>
  <div>JSX</div>
</>

 

2.2.4 JavaScript 표현식 사용

JSX 내부에서는 중괄호 {}를 사용해 JavaScript 표현식을 사용할 수 있습니다. 이를 통해 변수나 함수 호출 결과 등을 JSX 내에서 사용할 수 있습니다.

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

 

위의 예시에서는 name 변수가 {} 안에 들어가 React, JSX! 를 출력합니다.

 

추가로, 속성값을 전달하거나, 이벤트 핸들러를 등록하는 등 편리한 작업을 할 수 있습니다.

const name = 'JSX';
const imageUrl = 'image.jpg'

function handleClick(e) {
  alert('클릭!');
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <h1>React, {name}!</h1> // React, JSX
    <image src={imageUrl} /> // image.jpg 랜더링
    <button onClick={handleClick}>Button</button> // alert('클릭!') 호출
  </>
);

 

 

 

JSX는 React에서 UI를 구성하는 핵심 요소로, HTML과 유사한 문법을 사용하여 직관적인 컴포넌트 구조를 만들 수 있습니다. 이를 통해 React는 복잡한 사용자 인터페이스를 모듈화 하고, 상태 및 이벤트 관리 기능을 손쉽게 결합할 수 있게 합니다. JSX의 문법을 잘 이해하고 활용하는 것이 React 프로젝트에서의 생산성을 크게 향상시킬 수 있습니다.

 

JSX 문법에 대한 기본적인 이해를 바탕으로 React 컴포넌트를 작성하고, 더 복잡한 UI를 구축하는 데 도전해 보세요😀

 

 

추천글

2024.09.12 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트 함수

[JS] 자바스크립트 함수

2024.09.09 - [개발 공부 일지/JavaScript] - [JS] JavaScript 기초 - Dom 요소 선택하기

[JS] JavaScript 기초 - Dom 요소 선택하기