JSX 알아보기

시리즈

2024. 8. 28. PM 11:55:41

#react #리액트 #jsx #html

JSX는 JavaScript 문법에 XML 문법을 포함시켜 확장한 문법입니다. XML이 HTML의 상위 개념이니 HTML 문법도 포함되지요. React DOM 뿐만 아니라 React Native에서도 JSX 문법을 사용합니다. JSX에 대해 자세히 알아보겠습니다.

차이점

JavaScript와 차이점

JSX는 HTML 문서처럼 생겼지만, 빌드하면 최종 결과물은 JavaScript가 됩니다. 즉, JavaScript 코드입니다. 앞서 JSX로 Hello World를 하고, 이어서 순수 JavaScript로 Hello World를 한 이유가 바로 여기에 있습니다. JSX가 JavaScript라는 건 JavaScript의 문법이나 특성을 그대로 따른다는 걸 뜻합니다.

단지 JavaScript 문법을 무시하고 템플릿처럼 XML 문법을 사용할 수 있다는 점이 다릅니다. 그걸 제외하면 JSX로 만든 Element는 JavaScript 함수(함수식 컴포넌트인 경우)일 뿐이지요. 따라서 React를 잘 활용하는 근간엔 JavaScript 실력이 깔려있어야 합니다.

HTML과 차이점

닫는 태그

HTML 태그는 대부분 여는 태그와 닫는 태그가 짝지어져 있지만, 일부 HTML 태그는 닫는 태그가 없습니다. img, hr, br 같은 태그가 그 예죠. 또한 닫는 태그가 필요한 태그인데 닫는 태그를 누락하더라도 웹 브라우저가 DOM을 만들 때 알아서 잘 처리합니다. 어떡해서든 화면이 표시되도록 하여 HTML 문서를 작성하는 부담을 낮춥니다.

<p>푸딩캠프에 오신 걸 환영합니다.

예를 들어 p태그(paragraph)는 닫는 태그가 필요하지만, 웹 브라우저가 알아서 다음과 같이 처리해서 DOM이 망가지지 않게 하지요.

<p>푸딩캠프에 오신 걸 환영합니다.</p>

JSX는 닫는 태그가 항상 있어야 하며, 빠뜨리면 오류가 나서 정상 동작하지 않습니다. 그렇다면 img, hr, br 같은 태그는 어떻게 닫아야 할까요? 태그 뒤에 /를 넣습니다.

<hr />

속성명

HTML의 속성(attribute)은 JavaScript의 속성(property)에 매핑되는데, HTML에서는 사용 가능한 속성명이 JavaScript에서는 사용하지 못하는 속성명인 경우가 있습니다. 가장 대표적인 건 JavaScript의 예약어(reserved keyword)지요.

<div class="puddingcamp">푸딩캠프</div>

이 Element엔 속성(attribute)으로 class가 있습니다. 하지만 class는 JavaScript에서 클래스를 선언할 때 사용하는 예약어입니다. 그래서 JSX에서는 class 대신 className을 사용합니다.

<div className="puddingcamp">푸딩캠프</div>

이런 속성명이 몇 개 더 있습니다.

HTML 속성명	JSX 속성명
class	className
for	htmlFor
tabindex	tabIndex
autoplay	autoPlay
accesskey	accessKey
autocapitalize	autoCapitalize
autocorrect	autoCorrect
autofocus	autoFocus
autosave	autoSave
contenteditable	contentEditable
spellcheck	spellCheck
srcset	srcSet

class와 for를 제외한 나머지는 HTML 속성명에 대응하는 패턴이 보일 거예요. 그리고 그 패턴으로 유추할 수 있는 또 다른 이름 규칙은 대소문자를 구분한다는 것이지요. classname과 className은 서로 다른 속성(property)입니다. 왜냐하면 JavaScript가 그렇게 동작하기 때문입니다. 잊지 않으셨죠? JSX의 최종 산출물은 JavaScript 코드라는 걸.

사용법

예제 코드 입력하기

앞서 설명한 차이점을 제외하면 마크업은 HTML 문법과 같습니다. JavaScript 코드를 JSX 태그에 사용하려면 중괄호({, })를 사용합니다.

const name = "푸딩캠프";

return (<div
  className="text-primary"
  onClick={() => console.log("Hello PuddingCamp")}
>{name}</div>);

JSX 실습을 해보겠습니다. 실습하기에 앞서 main.jsx 파일을 원래대로 되돌립니다.

import './index.css';

import { StrictMode } from 'react';

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

import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

여기까지 진행한 커밋

이번엔 App.jsx 파일을 코드 에디터에서 열고 기존 코드를 싹 지우세요. 그러고나서 다음 코드를 채워넣습니다.

import './App.css';

import { useState } from 'react';

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>
      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button>구독하기</button>
      
      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
    </div>
  )
}

export default App;

저장하면 다음과 같은 화면이 출력됩니다.

입력란에 뭔가를 입력하면 다음 화면처럼 출력되고요.

간단하지만 뭐가 뭔지 혼란스러우시죠? 당연한 현상이예요. 여러분에게 프로그래밍 재능이 없어서 그런 게 아니라 이 예제에 React의 여러 개념이 사용되어서 그래요. 이 혼란스러운 단계를 극복하고 나면 학습에 재미와 속도가 붙을 거예요.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠