React로 시작하는 프론트 개발은 필자(seolim)의 경험을 기반으로 작성되며 절대 정답이 아닙니다! 이점을 유념하며 읽기 바랍니다.

Babel

js를 공부해본 사람이라면 commonJs나 ES3, ES5, ES6라는 말을 한번 쯤은 들어봤을 것이다. js는 ES버전에 따라 문법과 기능을 확장해왔다. 그런데 브라우저의 js해석기 그 속도에 맞추어 발전되지 못했고, 현대에 와서 구 브라우저를 사용하는 경우는 드물지 않다.

즉, 최신문법으로 작성하였을 때, 동작하지 않는 경우가 발생하는 것이다. 이로인해 도입된 것이 babel이다.

babel은 js 컴파일러로써 인풋으로 받은 js를 설정한 버전대의 js로 변환하여 반환한다. 이러한 기능은 최신문법으로 작성된 어플리케이션을 구 브라우저에서도 동작할 수 있도록 하는 시발점이 된다.

그럼 React에선 왜 필요하냐. 아직 React에 대한 설명을 한번도 한 적이 없지만 React를 써본 사람은 아래 문법을 사용했을 것이다.

function comp() {
    return <jsxComponent />
}

위의 <jsxComponent/>는 jsx라는 문법으로 작성된 것이고 실제 javascript에 존재하는 문법이 아니다. 실제로 위 코드를 js로 변경하면 아래와 같다.

function comp() {
    return React.createElement("jsxComponent", null);
}

그렇다. babel은 설정에 따라 js가 아닌 것들도 js로 변경해주는 역할을 포함한다. 백문이 불여일견이라고 위 과정을 실제로 한번 진행해보자.

npm i -D @babel/core @babel/cli @babel/preset-react

위 3개 package를 설치하자. @babel/core는 babel 코어이고 @babel/cli는 command환경에서 babel을 사용하게 하는 패키지이다. @babel/preset-react는 react와 관련된 문법을 변환하기 위한 설정파일이다.

변경되기 전 코드를 input.js로 저장하고 아래 명령을 실행해보자