목록으로

JSX 알아보기

시리즈
2024. 8. 28. PM 11:55:41

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태그(paragraph)는 닫는 태그가 필요하지만, 웹 브라우저가 알아서 다음과 같이 처리해서 DOM이 망가지지 않게 하지요.

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

속성명

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

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

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

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

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

사용법

예제 코드 입력하기

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

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

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

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

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

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

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