JavaScript ES6 핵심 문법 정리

React를 본격적으로 배우기 전에, ES6 문법을 먼저 정리했다. React 코드 곳곳에서 ES6 문법이 쓰이기 때문에 기초를 탄탄히 해두는 게 중요하다고 느꼈다.

let과 const

var는 함수 스코프, let과 const는 블록 스코프를 따른다.const는 재할당이 불가능하고 let은 재할당이 가능하다. 기본적으로 const를 사용하고 재할당이 필요한 경우에만 let을 사용하는 것이 권장된다.

const add = (a, b) => a + b 형태로, 기존 function 키워드보다 간결하다. 특히 콜백 함수에서 this 바인딩이 상위 스코프를 따르기 때문에 React 이벤트 핸들러에서 자주 사용된다.

백틱(`)을 사용해서 문자열 안에 변수를 ${variable} 형태로 삽입하고 여러 줄 문자열도 자연스럽게 작성 가능하다.

객체나 배열에서 값을 꺼내 변수에 담는다. React에서 props를 받을 때 ({ title, description }) 형태로 많이 사용한다. 배열 구조분해는 useState의 const [state, setState] 패턴에서 쓰인다.

... 연산자는 배열이나 객체를 펼칠 때(스프레드), 나머지 인자를 모을 때(Rest) 사용한다. 불변성을 유지하면서 상태를 업데이트할 때 필수적인 문법이다.

Promise는 비동기 작업의 결과를 나타내는 객체다.async/await 문법을 사용하면 비동기 코드를 동기적으로 읽히게 작성할 수 있다. API 호출 시 사용되는 패턴이다.

ES6 문법은 React를 배우기 위한 전제조건이다. 특히 구조분해 할당, 스프레드 연산자, 화살표 함수는 React 코드에서 거의 매 줄 등장하니 확실히 익혀두자.