[TIL] XML, JSX, Babel(바벨)

리액트를 사용하면 JSX 문법을 자연스럽게 접하게 된다. 막상 쓰는법은 알지만 이것이 정확히 무슨뜻이고 무슨 원리이고 어떤 배경이 있는지는 자세히 알지못했다. 풀어쓰면 Javascript XML 인데 이때 XML은 html과 비슷하지만 다른 확장성 마크업 언어이다.  따라서 무엇이 JSX이고 그안에 있는 XML 은 무엇인지 정리해보기로 했다.

 

XML

eXtensible Markup Language 약자이며 확장성 마크업 언어 이다.

보통 XML 형태는 html 태그와 비슷하지만 분명한 차이점이 많이 존재한다.

• XML은 data를 전달하는 데에 포커스를 맞춘 언어이고 HTML은 data를 표현하는 데에 포커스를 맞춘언어이다.
• XML은 HTML과 달리 tag가 미리 정의 되어 있지 않다.

장점으로는 문서 자체가 정보와 구조를 포함하고 있어 사람이 읽어도 태그 안의 의미를 쉽게 이해할수있다.

tag가 미리 정의 되지 않았기 때문에 마음대로 정의 할수있다.

 

JSX

그렇다면 JSX는 어떤것인가?

React 공식문서에서는 Javascript에 XML을 추가한 확장한 문법이라고 말하고 있다.

보통 html 태그를 통해 랜더링을 거치지만 리액트 같은 경우 Javascript 기반으로 둔 XML형식으로 엘리먼트를 생성하고 DOM에 렌더링을 한다. 이때 코드가 번들링 되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환한다.

 function App(){
      return (
      <div>
          Hello <b>react</b>
      </div>
      );
 }

위의 코드는 아래와 같이 변환 된다.

 function App(){
  return React.creacteElement("div", null, "Hello", React.creacteElement("b", null, "react"));
 }

만약 컴포넌트를 렌더링 할때 위의 코드처럼 매번 React.creacteElement함수를 사용한다면 불편한데 이러한 불편함을 JSX를 사용하면 UI 렌더링을 편하게 할수있다.

 

바벨 (Babel) 

그렇다면 위의 이야기하는 바벨(Babel)은 무엇일까?

바벨의 이름은 원래 '6to5' 라고 한다. 해석하자면 "6에서 5로 보낸다" 라고 하는데 ES6(ECMAScript6)를 ES5(ECMAScript5)로 바꿔준다는 뜻이다. 자바스크립트는 버전이 존재하는데 브라우저의 환경또한 다양해서 최신 버전의 자바스크립트와 오래된 버전이 공존하게 된다. 만약 과거의 브라우저가 최신 문법 ES6를 호환하지 못하는 경우도 있는데 이를 해결하기위해 바벨을 사용하는것이다.

ES6호환 브라우저 년도를 보면 ES6가 2015년에 나왔음에도 크롬 2017년, 오페라는 2018년이 되서야 호환이 가능했던걸 볼수있듯이 이러한 사용자가 이용하는 브라우저 호환을 커버하기위해 바벨과 같이 ES6를 ES5로 바꿔주는 도구가 있어야만 ES6 지원이 안되는 브라우저에서도 사용할수 있게 하는것이다. Babel을 통해 최신 자바스크립트 스펙을 모든 브라우저에서 사용 가능한 스크립트로 컴파일. 바벨은 트렌스파일러(특별한 타입의 컴파일러) 이다!

 

이렇듯 최신 문법을 바벨을 이용하여 이전 세대 코드로 호환해주는 기능을 해주듯이 리액트를 사용하여 JSX문법을 사용할때도 바벨이 이 역할을 해준다. 바벨을 사용하면 JSX를 브라우저가 읽기 쉬운 ES5 코드로 변환해주고 이를 바탕으로 개발자는 최신 문법을 사용하면서도 여러 브라우저에서 작동될 수 있는 코드를 걱정없이 작성 할수 있는 것이다.

 

이렇게 XML, JSX, 바벨 에 관하여 정리하였고 리액트의 초석이 될수 있는 웹팩과 번들링에 관한 개념은 다음에 정리할 예정이다.

 

 

 

참고사이트:

https://helloworld-88.tistory.com/67

[기본] XML 이란?

http://www.tcpschool.com/xml/xml_basic_syntax

코딩교육 티씨피스쿨

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://velog.io/@moonsemi1230/%EB%A6%AC%EC%95%A1%ED%8A%B8React-%EC%8A%A4%ED%84%B0%EB%94%94JSX%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

[리액트(React) 스터디]JSX(JavaScript XML)에 대해 알아보자!