[TIL] React 심화 주차 키워드

 

리덕스에서 미들웨어 청크의 역할은 뭘까요?

 

 

리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다. 

추가적인 작업은 다음과 같다

• 특정 조건에 따라 액션이 무시되게 만들 수 있습니다.
• 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다.
• 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다.

리덕스 청크란 리덕스 미들웨어의 한 종류이다.  간단한 동기 작업만이 가능한 리덕스에 비동기 작업이나, 웹 요청, 또는 저장소에 접근하는 복잡한 요청 등을 처리해준다.

 

 

프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?

 

프로미스를 실행하면 상태값을 즉각적으로 반환하기 때문에, 엄밀히 따지면 비동기가 아니라고 할 수 있다.

이때 동기 비동기란

• 동기: 요청과 결과가 동시에 일어남
• 비동기: 요청과 결과가 동시에 일어나지 않음

-프라미스는

• 비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체
• 비동기 매서드를 마치 동기 메서드처럼 값을 반환할 수 있음
• 콜백 헬 때문에 ES6에서 도입됨
  • 자바스크립트는 코어 엔진과 실행환경(런타임)의 도움을 받아 동시 실행함. 즉, 비동기 작업이 가능
  • WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작
  •  

프라미스 생성

• new Promise 를 사용

const promise = new Promise((resolve, reject) => {
	if(...){
		resolve("성공!");
	}else{
		reject("실패!");
	}
});

프라미스의 상태값

• pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행 성공(resolve가 호출된 상태)
• rejected: 수행 실패(reject가 호출된 상태)
• settled: 성공 or 실패(resolve나 reject가 호출된 상태)

프라미스 후속 매서드

• 후속 처리 메서드를 통해 비동기 처리 결과(성공 결과나 에러메시지)를 받아서 처리

1. then

• then의 첫 인자는 성공 시 실행, 두번째 인자는 실패 시 실행됨 (첫 번째 인자만 넘기는 것도 가능)

// 프라미스를 하나 만들어 봅시다!
let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료!"), 1000);
});

// resolve
promise.then(result => {
	console.log(result); // 완료!가 콘솔에 찍힐거예요.
}, error => {
	console.log(error); // 실행되지 않습니다.
});

1. catch(실패시)

// 프라미스를 하나 만들어 봅시다!
let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!"), 1000);
});

promise.catch((error) => {console.log(error};);

promise chaining(프라미스 체이닝)

• 프라미스는 후속 처리 메서드를 체이닝해서 여러 개의 프라미스를 연결할 수 있다.

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
	console.log(result);
	return "promise 3";
}).then(...);

async

• 함수 앞에 async를 붙여 사용
• 프라미스가 아닌 값도 프라미스로 바꿔서 반환해준다.

// async는 function 앞에 써줍니다.
async function myFunc() {
	return "프라미스를 반환해요!"; // 프라미스가 아닌 걸 반환해볼게요!
}

myFunc().then(result => {console.log(result)}); // 콘솔로 확인해봅시다!

await

• async 없이는 사용할 수 없다.
• async 함수 안에서만 동작
• 프라미스가 처리될 때까지 기다렸다가 그 이후에 결과를 반환

async function myFunc(){
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("완료!"), 1000);
	});

    console.log(promise);

	let result = await promise; // 여기서 기다리자!하고 신호를 줍니다.

    console.log(promise);

	console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 1초 후에 완료!가 콘솔에 찍힐거예요.
}

 

 

 

 

TDZ(Temporal Dead Zone/일시적 사각지대)란?

 

TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다. 

 

 

참조:https://funveloper.tistory.com/25