분류 Reactjs

React강좌 - 5 - React 전제 조건 및 4 가지 ES6 알아 두어야 할 것들 II

컨텐츠 정보

  • 조회 343 (작성일 )

본문

Transpilers and Babel 


ES6의 JavaScript를 크게 업그레이드하여 개발자는 새로운 멋진 것들을 모두 시험해보기 시작했습니다. 그러나 큰 문제가 있었습니다.


일부 브라우저는 일부 ES6 기능을 지원하지 않았습니다. 


IE와 같은 일부 브라우저는 최신 JavaScript 기능을 지원하지 않습니다. 그들이 언제 업데이트 될지 전혀 알지 못했습니다.


이것은 transpiler가 들어오는 곳입니다. transpiler는 우리의 ES6 코드를 브라우저가 읽을 수 있는 것으로 변환합니다.


Transpiler 예제 


IE가 이해할 수 없는 이 ES6 코드를 작성했다고 가정 해 보겠습니다.


const App = () => {
  return (
    <div>my app goes here</div>
  );
}

이전 버전의 브라우저를 지원하는 몇 가지 옵션이 있습니다.


  1. 멋진 ES6 구문을 작성하고 ES5 코드 작성
  2. 우리 코드를 브라우저가 이해할 수 있는 것으로 변환 한 도구를 사용하십시오 (transpilers)


Babel과 같은 변환기를 통해 위의 코드를 실행하면 다음 코드가 생성됩니다. 이것은 IE가 이해할 수 있는 코드입니다! 바벨을 여기서 시험해 볼 수도 있습니다.


"use strict";

var App = function App() {
  return React.createElement("div", null, "my app goes here");
};

우리는 이와 같은 코드를 작성하고 싶지 않습니다. 지겨워. 깨끗한 ES6 구문을 작성하고 이 transpilers가 우리에게 힘든 일을 하도록 합시다.


이전 기사에서 CodePen 예제를 만들었을 때 우리는 CodePen을 설정하여 코드를 Babel로 이동했습니다. 이것이 구식 브라우저가 React 코드를 이해하는 방법입니다.


어떻게 바벨을 사용합니까? 


React CLI (create-react-app)를 사용하여 응용 프로그램을 시작하면 자동으로 Babel이 추가됩니다. 이미 존재하는 애플리케이션에 React를 추가하는 경우 webpack 또는 다른 유사한 도구를 사용하여 직접 빌드 설정을 추가 해야 합니다.




ES6