(1-1) React 기초 - JSX

 

JSX: JavaScript 를 확장한 문법

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다.

 

JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

 

 

 

 

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 되었다. JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것이다.

 

 

 

주의해야 할 점! JSX는 HTML이 아니다.

주의할 점은 JSX은 HTML처럼 생겼지만 HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요하다. 그럼 실제 예제를 통해서 우리가 왜 JSX를 써야 하는지 살펴보도록 하자.

 

왜 JSX를 써야할까?

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하다. Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있다. (혹은 내부에 넣을 수도 있다.)

 

 

하지만 React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성할 수 있다. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다. 두 마리 토끼를 한 번에 잡을 수 있는 것이다.

 

 

JSX 없이는 React 요소를 만들 수 없는 걸까? 물론 JSX 없이도 React 요소를 만들 수 있다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있다.

 

 

JSX를 사용함으로써 코드를 이해하기 쉬워진다. 그리고 앞서 설명했던 Babel이 알아서 이 JSX 코드를 변환해주니 편리하게 이용할 수 있을 것이다.

 

 

우리는 앞으로 수많은 React element를 만들어나가게 된다. 이때 JSX를 사용함으로써 코드의 복잡성을 줄이고, 이를 이해하기 쉽게 만들 수 있다.