[Frontend] JSX에 대하여

JSX는 React에서 제공하는 JavaScript의 확장 문법입니다.

React로 코드를 작성할 때 JSX 문법을 활용하면 훨씬 편리하게 화면에 나타낼 코드를 작성할 수 있습니다.

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

위의 코드를 보면 단순한 HTML 코드를 사용하는 것 처럼 보일 수 있지만, 엄밀히 말하면 HTML과 유사한 문법으로 작성한 것입니다.

JSX는 실제 실행시 HTML 코드, 정확히는 요소(element)를 만들수 있게 합니다.

이 때문에 JSX는 HTML 문법과 몇 가지 다른 점이 존재합니다.

JSX에서의 JavaScript 사용

JSX는 HTML 코드를 위한 확장 문법이지만, 기본적으로 JavaScript인 만큼 원래 표현식들도 함께 사용 가능합니다.

(단, 조건문 & 반복문 등의 JavaScript 문장은 사용할 수 없습니다!)

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const title = "jsx_title" // JS 변수를 선언합니다.

function func() {
  alert("button is clicked");
}

root.render(
  <>
    <h1 id="title">the title is {title}</h1> // {}에 JS 변수 title을 호출합니다.
    <button onClick={func}>button</button> // {}에 JS 함수 func를 호출합니다.
  </>
);

JSX와 HTML의 차이점

1. CamelCase 표기

JSX에서 HTML 코드를 작성할 때는 Javascript에서 사용하는 예약어들을 사용하지 못합니다.

대신 두 번째 단어의 첫 글자를 대문자로 표시하는 CamelCase 표기법을 사용합니다.

CamelCase는 JavaScript의 예약어 뿐 아니라 다른 속성값 이름에도 적용합니다.

class → className
for → htmlFor
onblur → onBlur
onfocus → onFocus
onmousedown → onMousedown

// JavaScript에서 class는 이걸 뜻하기 때문에
class A {
	// content
}

// 이렇게 쓰면 작동하지 않습니다
<p class="A"> content </p>

// 대신 이렇게 써야 합니다
<p className="A"> content </p>

2. 단일 요소로 반환

JSX를 사용할 때는 반드시 하나의 요소(태그)안에서 작성해야 합니다.

만약 원래 HTML 코드 처럼 태그를 연달아 사용하면 에러가 발생해 웹브라우저를 실행할 수 없습니다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// 이렇게 작성하면 빨간줄과 함께 에러가 발생합니다
root.render(
  <h1>paragraph 1</h1>
  <h1>paragraph 2</h1>
);

때문에 여러 개의 태그들을 묶는 하나의 상위 요소가 있어야 합니다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  // 상위 요소로 <div> 태그를 사용했습니다.
  <div>
    <h1>paragraph 1</h1>
    <h1>paragraph 2</h1>
  </div>
);

웹 브라우저를 실행해보면 이렇게 <div> 태그 안에 있는 <h1> 태그들을 볼 수 있습니다.

 

 만약 결과물에서 상위 요소(여기서는 <div>)가 구현되는 것이 싫다면, <Fragment> 태그를 사용할 수 있습니다.

<Fragment>는 요소로서 존재할 수 있지만, 실제 구현상으로는 표시되지 않는 place holder의 역할을 합니다.

import { Fragment } from 'react'; // 이 구문은 <Fragment>를 사용하면 자동으로 추가됩니다.
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <div> 대신 <Fragment>를 사용했습니다.
  <Fragment>
    <h1>paragraph 1</h1>
    <h1>paragraph 2</h1>
  </Fragment>
);

<div>가 표시되지 않습니다.

매번 <Fragment>를 입력하는 것이 번거롭다면, 아무것도 없는 <>태그를 사용해도 됩니다.

import { Fragment } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 아무것도 없습니다.
  <>
    <h1>paragraph 1</h1>
    <h1>paragraph 2</h1>
  </>
);

결과는 <Fragment>와 동일하게 나옵니다.

3. 주석 없음

JSX는 HTML 주석(<!--...-->) 이나 <!DOCTYPE> 같은 특별한 태그를 지원하지 않습니다.

4. void 요소 없음

JSX는 void 엘리먼트가 없습니다. 즉, 모든 엘리먼트는 닫는 태그 또는 자체 닫기가 있어야 합니다.

<input> 또는 <br> 엘리먼트를 복사할 때 이 점을 염두에 둬야 합니다.