Babek 이해하기

react로 개발을 하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것이다. create-react-app에도 기본으로 들어있고 기타 react 관련된 튜토리얼을 따라 하다 보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 자바스크립트를 많이 사용한다면 babel을 함께 사용할 것을 추천한다.
babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.
리액트 JSX 문법, 타입스크립트(정적언어)를 자바스크립트 코드로 변환

ES6 문법

특히 ES6에는 상당히 유용한 문법이 많다. 간단히 몇 가지만 살펴보자

arrow function

arrow function을 사용하면 함수 선언이 간단해진다. arrow function의 this는 자신을 포함하는 가장 근접한 일반 함수의 this를 참조한다. 따라서 arrow function의 this는 arrow function이 호출되는 시점과는 무관하게 선언되는 시점에 결정된다. 개인적으로 이 점이 상당히 편리해서 잘 쓰고 있다.

dataList.forEach(item => console.log(item.value))

classes

생성자, 상속 등의 클래스 기능을 사용할 수 있다.

enhanced object literals

object 생성이 편리해졌다.

// 예전 방식
const obj = {
  foo: foo,
  bar: 42
}
// es6
const obj = {
  foo,
  bar: 42
}

template strings

여러 개의 문자열을 +로 붙이는 작업은 상당히 성가시다. 아래의 방식으로 자연스럽게 표현이 가능해졌다.

const msg = `Hello ${name}, current time is ${time}`

destructuring

object에서 필요한 부분만 뽑아낼 때 편리하다. 특히 함수에서 매개변수의 일부만 입력으로 받고 싶을때 유용하다.

const {foo} = obj;
function savePerson({name, age, onSuccess, onFail}) {...}
savePerson({name: "berry", onSuccess: () => alert("person saved")})

let & const

수정 가능한 변수는 let, 수정 불가능한 변수는 const를 사용한다. let은 var와 유사하지만 block-scope라는 차이점이 있다. var는 block-scope가 아니라서 실수하기가 쉽다. 또한 let과 const를 사용하면 코드가 좀 더 읽기 쉬워진다.