처음 만난 리액트 문서
3.1 JSX란?
우리가 자바스크립트를 줄여서 보통 JS라고 많이 표기를 합니다. 그리고 자바스크립트 관련 라이브러리도 이름 뒤에 js가 붙어서 자바스크립트 라이브러리라는 것을 나타내기도 합니다. 우리가 배울 리액트도 사실 공식 명칭은 ReactJS입니다. 리액트 공식 홈페이지 주소가 지금은 https://react.dev 로 바뀌었지만, 과거에는 https://reactjs.org 였습니다.
그렇다면 JSX는 무엇일까요? 이름을 보면 뭔가 자바스크립트와 연관이 있을 것 같아 보입니다. JSX는 영어로 아래와 같은 의미를 갖고 있습니다.
"A syntax extension to JavaScript"
이 문장을 그대로 해석해보면 '자바스크립트의 확장 문법'이라는 뜻이 됩니다. 우리가 아까 이름에서 유추했던 것처럼 JSX는 자바스크립트와 연관이 있으며, 쉽게 말해서 자바스크립트의 문법을 확장 시킨 것이라고 보면 됩니다.
그럼 문법을 어떻게 확장을 한 것일까요? JSX는 JavaScript와 XML/HTML을 합친 것이라고 보면 됩니다. 그래서 JSX의 X는 extension의 X로 볼수도 있지만, 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것이라고 기억하면 됩니다. 아래에 나와 있는 가장 간단한 JSX 코드 예시를 한 번 보도록 하겠습니다.
const element = <h1>Hello, world!</h1>;
이 코드를 보면 대입연산자 '='이 나옵니다. 이미 우리가 알고 있는 것처럼 대입연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해주는 역할을 하죠. 여기서 대입연산자 '='의 왼쪽에 나오는 자료형 const와 변수명인 element까지는 우리가 흔히 사용하는 자바스크립트 문법입니다. 그런데 특이하게 대입연산자 '='의 오른쪽에는 HTML코드가 나옵니다. HTML의 <h1>태그를 사용해서 Hello, world!라는 문자열을 값으로 갖고 있죠. 결과적으로 이 코드는 자바스크립트 코드와 HTML코드가 결합되어 있는 JSX 코드가 되는 것입니다. 이 코드가 하는 역할은 <h1>태그로 둘러싸인 문자열을 element라는 변수에 저장하는 것입니다.
JSX를 모르는 상태에서 이 코드를 보면 굉장히 이상한 문법처럼 느껴질 수 있습니다. 하지만 앞으로 리액트를 배우면서 이런 JSX 코드가 계속 나올 것이기 때문에, 이 문서를 다 읽은 시점에는 굉장히 익숙해져 있을 것이라고 생각합니다. 그리고 앞으로 계속해서 리액트로 개발을 하게 된다면 JSX 코드와 친해지는게 거의 필수적입니다.
마지막 업데이트: 2025년 08월 21일 08시 13분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page