지금껏 프로젝트를 하면서, 리덕스를 사용하여 상태관리를 해왔다.

상태관리 라이브러리는 정말 많다. 최근에 들어본 상태관리 라이브러리는 Mobx , Recoil, Zustand 등등..

다른 상태관리를 직접 프로젝트에서 적용해보진 않았지만, 통계적으로 압도적이다.

지금까지 리액트와 리덕스를 사용하면서 큰 불편함을 느낀적은 없었다.

하지만, 리덕스의 타입정의, 액션함수, 리듀서를 왔다갔다 하며 변경해줘야하는 번거로움이 있었다.

리액트 18버전으로 업그레이드 하면서, 기존에 내가 사용하던 리덕스의 문법이 Legacy한 문법이라고 하여 찾다보니 리덕스 툴킷이라는 라이브러리가 기존의 리덕스의 불편함을 보완 해줄 수 있다고 어렴풋하게 알고있었다.

Promise

자바스크립트 ES6이후에 등장하게 된 promise객체는 비동기 처리 작업 할 때 콜백함수가 쌓이게되는 콜백지옥을 해결하기 위해 처음 등장이 되었다.

같은 원리이지만, promise객체를 통해 더 가독성이 쉽게 표시할 수 있어서 이용하게 되었고,

promise 또한 많은 promise변수를 사용하여 리턴하게 되면 promise지옥을 경험 할 수 있다.

콜백함수, promise, async/await의 응답속도

콜백함수나 promise의 응답속도는 거의 같다.

처음 호이스팅 환경에서 차례로 읽기 때문에 비동기 처리 되는 영역은 처리 완료 되지 않은 상태에서 다음을 읽는다. 따라서, setTimeout함수와 같이 딜레이를 주게 되어도 응답속도는 딜레이를 무시하고 먼저 처리한다.

웹브라우저의 구성 요소

• Call Stack : 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API : 웹 브라우저에서 제공하는 API로 AJAX나 TimeOut등의 비동기 작업 수행
• Task Queue : Callback Queue 라고도 하며, Web API에서 넘겨받은 Callback함수를 저장.
• Event Loop : Call Stack이 비워져있다면, Task Queue의 작업을 Call Stack으로 옮김.

setTimeout(() => console.log("Async Hi hun"));
console.log("Hello! World");
// Hello! World
// Async Hi hun

비동기 코드는 먼저 실행됨에도 불구하고, 나중에 출력되는걸 볼 수 있다.