JSX 사용 가이드: HTML과 다른 점은 무엇일까?

aksen5240·2024년 1월 1일

목록 보기

1/14

📚 JSX 사용 가이드: HTML과 다른 점은 무엇일까?

웹 개발의 세계는 끊임없이 진화하고 있으며, 이러한 변화 속에서 리액트(React)는 현대 웹 개발의 핵심 요소로 자리 잡았다. 따라서, 많은 사람들이 리액트를 공부하고, 또 사용하고 있는데, 리액트를 이해하고 효과적으로 사용하기 위해서는 JSX에 대한 깊은 이해가 필수적이다.

이에, 이번 글에서 JSX가 무엇인지, 그리고 그것이 HTML과 어떻게 다른지에 대해 알아보려고자 한다.

JSX란?

📌 JSX 정의 및 구조

JSX는 JavaScript XML의 약자로, 자바스크립트의 확장 문법으로써 리액트 개발에 있어 HTML 문법을 편리하게 활용할 수 있게 도와준다.

HTML과 유사한 구조를 가지고 있어 웹 개발자들에게 친숙하며, 리액트에서 UI를 쉽게 구현할 수 있게 해준다.

기본적인 구조는 아래와 같다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>Hello, world!</h1>,
);

JSX의 주요 규칙들

JSX는 HTML과 유사한 문법을 제공하지만, 몇 가지 중요한 차이점이 있다.

📌 속성명은 카멜 케이스로 작성

HTML과 달리 JSX에서는 속성명을 카멜 케이스로 작성해야 한다.

예를 들어, onclick은 onClick으로, onfocus는 onFocus로 작성한다. 이는 자바스크립트의 네이밍 규칙을 따르기 때문이다.

<button className="btn" data-status="대기중">대기중</button>

📌 자바스크립트 예약어와 같은 속성명 사용 불가

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

그래서 HTML의 for의 경우에는 자바스크립트의 반복문 키워드 for와 겹치기 때문에 htmlFor로, HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성해야 한다.

React 공식 문서 - 어트리뷰트의 차이

  <form>
    <label htmlFor="name">이름</label>   {/* html대신 htmlFor 사용 */}
    <input id="name" className="name-input" type="text"/>  {/* class 대신 className 사용 */}
  </form>

📌 반드시 하나의 요소로 감싸기

JSX 문법을 활용할 때 인접한 JSX 태그는 반드시 하나의 태그로 감싸야 한다. 가장 최상위 태그는 반드시 하나만 존재해야 하기 때문이다.

하나의 요소로 감싸는 대표적 방법으로, 부모 태그를 사용하거나, Fragment를 사용할 수 있다.

  <>
    <p>Hi</p>
    <p>React!</p>
  </>

부모 태그 필요: 여러 요소를 렌더링할 때는 하나의 부모 태그로 감싸야 한다.
Fragment 사용: 부모 태그가 필요 없을 때는 Fragment 또는 빈 태그(<>)를 사용할 수 있다.

📌 자바스크립트 표현식 넣기

중괄호 {}를 사용하여 자바스크립트 표현식을 JSX 내에 삽입할 수 있다. 이를 통해 변수를 렌더링하거나, 함수를 호출하거나, 특정 조건에 따라 다른 내용을 렌더링할 수 있다.

추가적으로, 조건문이나 반복문은 JSX 내에서 직접적으로 사용할 수 없으나, 조건 연산자나 배열의 메소드(map, forEach 등)를 활용하여 간접적으로 구현할 수 있다.

이와 같이 자바스크립트 표현식을 사용하면 코드를 훨씬 더 가독성있고 깔끔하게 작성 가능하다.

import ReactDOM from 'react-dom/client';

const product = '갤럭시';
const model = 'S20';
const imageUrl = 'https://example.com/galaxy-s20.png'; // 예시 이미지 URL

function handleClick(e) {
  alert('주문이 완료되었습니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{`${product} ${model} 주문하기`}</h1>
    <img src={imageUrl} alt="휴대폰 제품 사진" />
    <button onClick={handleClick}>주문</button>
  </>,
);