Learning React - 2장

리액트를 공부하기 위해 Learning React를 공부하기 시작했다. 

리액트는 Udemy로도 몇 번 보긴 했지만 끝내지 못해서 이 책을 끝내는 것을 목표로 리액트 공부를 다시 시작하기로 했다. 

정말 기초부터 제대로 이해하고자 쉬운 내용이지만 다시 정리한다. 

 

리액트를 위한 자바스크립트

 

자바스크립트의 컴파일링은 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 자바 스크립트 구문으로 변환하는 것이다. 이를 도와주는 것이 바로 바벨(Babel)이다.

 

자바스크립트 컴파일은 보통 웹팩(Webpack)이나 파슬(Parcel)과 같은 자동화된 빌드 도구에 의해 처리된다. 

 

구조 분해(destructuring)

구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다.

const sandwich = {
	bread: "더치 크런치",
    meat: "참치",
    cheese: "스위스",
    toppings: ["상추", "토마토", "머스타드"]
};

const {bread, meat} = sandwich;

console.log(bread,meat);

이 코드는 sandwich를 분해해서 bread와 meat 필드를 같은 이름의 변수에 넣어준다. 

 

객체 리터럴 개선 (object literal enhancement)

변수를 정의하고 이를 객체의 필드로 묶는 것을 뜻한다.

const name = "탈락";
const elevation = 9738;

const funHike = {name, elevation};

console.log(funHike); // {name: "탈락", elevation: 9738}

스프레드 연산자(spread operator)

3개의 점(...)으로 이뤄진 연산자로 몇 가지 다른 역할을 함.

1. 스트레드 연산자를 이용해 배열의 내용을 조합 가능

예를 들면, 두 개의 연산자 peaks, canyons가 있다면 seoraksan = [...peaks, ...canyons]를 통해 새로운 배열을 생성 가능

 

프라미스와 fetch

프라미스는 자바스크립트에서 비동기적인 동작을 잘 처리할 수 있게 해준다. 대기 중인 프라미스는 데이터가 도착하기 전의 상태를 표현한다. fetch()는 데이터를 받아오고, then()은 데이터가 도착하면 그 데이터를 가지고 다른 일을 한다.

 

then은 프라미스가 정상적으로 완료되면 콜백 함수를 한 번만 호출한다. 이 콜백 함수가 반환하는 값은 그 다음에 오는 then 함수의 콜백에 전달되는 인자가 된다. 따라서 성공적으로 처리된 프라미스를 처리하기 위해 then함수를 연쇄적으로 호출할 수도 있다.

 

async/await

비동기 프라미스를 처리하는 다른 방법은 async함수를 만드는 방법이다. async를 사용하는 코드는 전콩적인 동기적인 방식의 코드와 비슷하다. then 함수를 연쇄 호출해 프라미스의 결과를 기다리는 대신, async 함수는 프라미스 다음에 있는 코드를 실행하기 전에 프라미스가 끝날 때까지 기다리라고 명령할 수 있다.

 

async라는 키워드는 해당 함수를 비동기 함수로 만들어준다. 비동기 함수에서는 코드를 더 진행하기 전에 프라미스가 완료될 때까지 기다릴 수 있다. 프라미스 호출 앞에 await 키워드를 붙이면, 프라미스가 완료될 때까지 기다렸다가 함수가 진행된다.

 

자바스크립트 모듈(Module)

다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각

자바스크립트는 모듈을 한 모듈당 하나씩 별도의 파일로 저장한다. 

한 모듈에서 여러 자바스크립트 객체를 외부에 노출시키는 방법과 한 모듈에 하나의 자바스크립트 객체를 노출시키는 방법이 있다.