ES6+ & React

고랭·2020년 4월 24일
0
post-thumbnail

이 포스팅은 [실전 리액트 프로그래밍]을 공부하고 정리한 내용으로, 대부분의 내용이 해당 서적에서 나왔음을 밝힙니다.

챕터2는 리액트를 위해서라기 보다는, 최신(?) 자바스크립트 표준을 보기에 꽤 괜찮았다.

정리해보면
1) var는 함수 스코프, 호이스팅, 변수의 재정의와 같은 여러가지 특징을 가지는데, 가끔은 저런 특징들을 활용할 수 있어서 재밌지만 문제를 일으키는 var 보다는 목적에 맞게 letconst를 쓰는 걸 추천한다.
하지만 const로 정의된 객체는 불변이 아니라는 점은 꽤나 흥미롭다.

2) 전개연산자와 비구조화할당은 객체나 배열의 프로퍼티를 다루는 스킬을 한층 고급스럽게 만들어 준다.

3) 함수의 기능 강화
ㄴ 파라미터 초기값 세팅 가능,
ㄴ 화살표 함수
this 바인딩 관련 참고 1

위의 내용은 읽는 정도로 충분하였고, 평소 가장 흥미 있었던 프로미스에 대해 조금 더 작성해보려 한다.

- 프로미스 (Promise)

비동기 상태를 값으로 다룰 수 있는 객체로 비동기 프로그래밍을 동기 프로그래밍 방식으로 코딩할 수 있게 해준다.
3가지 상태(대기 중(pending), 이행됨(fulfilled) 그리고 거부됨(rejected))를 가진다.
이때, 이행됨거부됨의 상태를 처리됨(settled)이라고 부른다.

이전에는 프로미스에 대해 아래와 같이 어설프게 이해하고 있었다.
then은 resolve 콜백 함수에 의해 호출, catch는 reject 콜백 함수에 의해 호출을 처리한다.

프로미스 객체 생성 후,
(1) resolve 함수가 호출되면 '이행됨' 상태의 프로미즈가 생성되며 해당 프로미즈의 데이터는 resolve 함수에 사용된 파라미터를 가진다. 그리고 바로 다음 then의 첫번째 파라미터(onResolve) 를 함수로 호출한다.
(2) reject 함수가 호출되면 '거부됨' 상태의 프로미즈가 생성되며 해당 프로미즈의 데이터는 reject 함수에 사용된 파라미터를 가진다. 그리고 바로 다음 then의 두번째 파라미터(onReject) 를 함수로 호출한다.
(3) finally 함수가 호출되며 전달받은 프로미즈의 상태를 그대로 반환한다.

예제1) then 하나로 then과 catch 기능을 처리할 수 있다.
(a)
.then(() => console.log('onResolve'), () => console.log('onReject'))

(b)
.then(() => console.log('onResolve'))
.catch(() => console.log('onReject'))

(a)와 (b)는 동일한 기능을 수행한다.
예제2) 프로미즈의 상태에 따라 호출되는 콜백 함수.
Promise.reject('err')
    .then(() => console.log('then 1 '))
    .then(() => console.log('then 2 '))
    .then(() => console.log('then 3 '), () => console.log('then 4 '))
    .then(() => console.log('then 5 '), () => console.log('then 6 '));

실행결과: then 4 then 5

Promise의 가장 기본적인 함수 3가지와 상태 3가지를 쉽게 이해했다면,
아래의 추가 내용 요약을 이해하기 쉬울 것.

1) 의존성을 지니지 않는 비동기 코드의 병렬 처리 하는 Promise.all
2) 먼저 처리된 프로미스를 가져오는 Promise.race (타임아웃 처리에 상당히 좋음)
3) then, catch는 새로운 프로미즈를 반환하며, return 키워드를 까먹지 말 것.
4) 예외처리가 발생할 수 있는 함수는 가급적 then 메서드 내부에서 같이 동작시키기. (의존성에 따라 처리해야함.)
5) async/await는 프로미즈를 활용하는 한 가지 방식이란 것.
(async/await는 예외처리를 try...catch를 사용하여야 한다.)

profile
만년신입

0개의 댓글