참고 영상: (https://www.youtube.com/watch?v=8aGhZQkoFbQ)

Synchronous

동기식 처리는 직렬적으로 태스크를 수행한다. 우리가 매장에서 상품을 구입할때 계산대가 1개 밖에 없는 경우를 생각하면 되는데, 어떤 작업이 수행중이면 다음 작업은 대기하게 된다.
예시로 위에 그림처럼 서버에서 데이터를 가져와 화면에 렌더링해주는 과정에서 서버에 데이터를 요청하고 응답이 오기전까지 태스크들은 작업이 중단된다. 그에 대한 예시로 위와 같은 꼬리에 꼬리를 무는 함수를 실행시키면 순차적으로 실행되어 'func1', 'func2', 'func3'의 결과가 나오게 된다.
현재 진행중인 프로젝트에서 한페이지에서 3개의 get요청을 함수를 실행해야 되는 부분이 있는데, 나는 처음에 한개의 get요청이 끝나면 두번째 get요청을 보내고 두번째 요청이 끝나면 세번째 get요청을 보낸다고 생각했다. 그런데 그렇게 되면 만약 첫번째 요청에서 시간이 지체된다면 렌더링에 굉장히 긴 시간이 소요되고, 사용자의 이탈이 이루어 질 것이다.

Asynchronous

비동기식 처리는 병렬적으로 태스크를 수행한다. 매장에서 상품을 구입할때 계산대가 손님에 맞춰 한개씩 있다고 생각하면 되는데, 어떤 작업이 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행하게 된다.

위에 그림처럼 서버에 데이터를 요청한 이루 서버로부터 데이터가 응답할때까지 대기하지 않고, 그 사이 과정에서 다음 태스크를 실행한다. 이후 데이터로부터 응답이 도착하면 이벤트가 발생하고, 태스크를 계속해 수행하게 된다.

그렇다면 React의 useState는 동기 or 비동기

useState의 setState는 이벤트핸들러 안에서 비동기적으로 동작한다. 따라서 함수안에서 여러개의 state가 업데이트되면 일괄적으로 렌더링 하게 된다.

따라서, 아까 내가 고민하던 부분은 비동기적으로 GET요청을 보낼 수 있겠다. 전역적인 State인 Atom을 만들고, 이를 구독중인 부분에서 이벤트가 일어나면 Atom의 상태를 업데이트 시키고, Selector에서 get요청 보내는 함수를 동시에 3개를 보내버리면, 순차적으로 실행되는것이 아닌 데이터의 응답이 오는대로 렌더링이 될것이다.