리액트와 바벨과 JSX의 관계
리액트를 이제 시작하는 분들을 위한 쉬운 설명
리액트를 처음 배울 때 바벨과 JSX를 개념적으로 배웁니다. 제 경우엔 이 부분이 쉽게 이해가 가질 않았어요. 그래서 실제적인 예를 보면서 바벨이 왜 필요한지, JSX가 왜 편리한지 하나하나 설명해드리고자 합니다.
JSX와 바벨을 사용하지 않은 코드의 모습위의 코드(코드 링크)는 코드팬에서 구현한 리액트 코드입니다. 간단히 설명하자면 "안녕하세요!" 버튼을 누르면 "반갑습니다"로 텍스트가 바뀌는 토글 버튼을 생성한 예제입니다. 자바스크립트 코드만 보시면 아시겠지만 단순한 버튼 추가임에도 불구하고 코드가 길고, 직관적이지 않습니다. 이를 JSX 형태로 바꿔보면 다음과 같습니다.
JSX와 바벨을 사용한 모습주목할 부분은 return 이후의 코드입니다.(코드 링크) 기존엔 React.createElement()라는 함수로 HTML 태그를 생성했으나 이번엔 <button> 태그와 클릭 이벤트(onClick)를 바로 적어주었습니다. 코드 가독성이 훨씬 좋아졌습니다. 어떻게 JSX와 바벨을 사용하면 위와 같은 일이 가능한 걸까요?
JSX은 뭘까
먼저 JSX를 천천히 살펴보겠습니다. JSX를 설명하는 리액트 문서를 살펴보면 다음과 같은 내용으로 설명합니다.(https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html)
쉽게 설명하면 JSX는 HTML 태그를 변수로 할당하고, 호출하고, 리턴할 수 있는 확장 문법이라 볼 수 있습니다. 이를 사용하면 HTML 변환을 위한 코드(React.createElement)를 호출하지 않고도 HTML 태그를 작성해 변수에 넣거나 리턴에 넣거나 할 수 있습니다. 정말 간단하고 편리합니다.
바벨(Babel)은 뭘까
jsx의 깊은 설명은 리액트의 문서를 참고해주시고, 이제 바벨로 넘어갑니다. 바벨의 본 이름부터 이야기해보고 싶습니다. 바벨은 원래 '6to5'라는 이름을 가졌습니다. "6에서 5로 보낸다"를 보면 짐작 가능하시겠지만 ES6(ECMAScript 6)를 ES5(ECMAScript 5)로 바꿔주는 걸 뜻합니다.
자바스크립트에는 버전이 존재합니다. 사용자의 브라우저 환경이 다양한 것처럼 최신 버전의 자바스크립트와 오래된 자바스크립트가 공존하는데, 과거의 브라우저는 당시 신형 문법인 ES6를 제대로 호환하지 못했습니다. ES6를 지원하는 브라우저 스펙을 보면 다음과 같습니다.
https://www.w3schools.com/js/js_es6.asp2015년도에 ES6가 나왔음에도 크롬, 파이어폭스 등의 브라우저는 2017년이 돼서야 지원을 시작한 것을 확인할 수 있습니다. 그러다 보니 바벨과 같이 ES6를 ES5로 바꿔주는 도구가 있어야만 오래된 브라우저에서도 사용이 가능했습니다.
바벨의 기능은 최신 문법을 이전 세대의 코드로 호환해주는 기능 이외에도 다양한 기능을 제공하는데, 그중 하나가 JSX 문법입니다. 바벨을 사용하면 JSX를 브라우저가 읽기 쉬운 ES5 코드로 변환해주고, 이를 바탕으로 개발자는 최신 문법을 사용하면서도 여러 브라우저에서 작동될 수 있는 코드를 작성할 수 있습니다.
리액트와 JSX와 바벨의 관계
리액트에게 있어서 JSX와 바벨은 천사 같은 친구입니다. 이 두 친구가 없이 리액트만 있다면 리액트를 쓰는 게 무척 어렵거나 아니면 아예 출시가 안됐을지도 모릅니다.
리액트를 배우실 때 보통 JSX, ES6, 바벨, 웹팩 등 웹 개발의 초석이 되는 개념들을 많이 배우다 보면 혼란스러울 수 있습니다. 위의 관계를 보시면서 각각이 어떻게 사용되는지, 어떤 관계로 돌아가는지 감을 잡으신다면 그다음 단계로 넘어가는 것도 어렵지 않으실 거라 생각합니다.
