Redux 따라 만들어보기 (5) - 비동기와 동기

웹 애플리케이션에서 데이터를 fetch해오는 동작들은 대부분 비동기가 문제의 핵심이다.

 

그렇다면 동기 코드와 비동기 코드의 차이점은 무엇일까?

 

우선, 우리가 작성한 코드는 동기 코드이다.

 

콘솔로 확인해봤을 때

위 사진을 통해 순서대로 콘솔이 출력되기 때문에 동기 코드임을 확인할 수 있다.

즉 Redux는 동기로 처리함을 알 수 있다.

 

아까 작성한 reducer.js에서  다음의 코드가 작성되어있다고 가정해보자

 

.then 체인에 있는 result는 어떤 값을 return 할까?

답은 undefined이다.

그 이유는 reducer는 그냥 함수여서 fetch는 비동기 작업 여부에 상관없이 그냥 return 되고 종료되기 때문이다.

 

그렇다면 reducer가 순수함수(입력값에 상관없이 출력값이 동일)인것과 비동기는 어떤 연관이 있을까?

비동기 작업은 어떤 작업이든간에 순수하지 않은 작업이라고 규정하고 있다.

fetch는 입력값이 동일해도 네트워크 상태에 따라 성공/실패 결과가 다르기 때문에 

애초에 reducer와 비동기 작업은 맞지 않다는 결론이 도출된다

 

그럼 어떻게 해결하는데?

Redux가 middleware라고 하는 아키텍처를 제공하고 

그 미들웨어 아키텍처 즉 'reducer' 바깥쪽에서 해결하도록 안내한다

 

따라서 다음 포스트에서부터 미들웨어를 만들어보고자 한다.