이번 절에서는 Async Logic에 대해서 알아보도록 하겠습니다.
먼저 Async라는 단어는 Asynchronous라는 단어를 줄여서 쓴 것인데, Asynchronous는 동시에 발생하지 않는 이라는 뜻을 갖고 있습니다.
동시에 발생하지 않는다는 말은 어떤 일들이 같은 시간이 아닌 다른 시간에 발생해도 된다는 의미입니다.
컴퓨터 프로그래밍에서는 이러한 것을 비동기라고 부릅니다.
어떤 작업들이 일련의 순서에 맞춰서 실행되는 것이 아닌, 각자의 순서대로 비동기적으로 처리된다는 의미입니다.
그럼 동기와 비동기 방식을 그림으로 한 번 살펴볼까요?
이 그림은 동기와 비동기 방식을 나타난 것인데, 먼저 왼쪽에 나와있는 동기 방식에서는 프로그램의 흐름이 흘러가다가 어떤 작업을 만나면 그 작업 이 끝날때까지 흐름이 끊키게 됩니다.
그리고 작업이 끝난 이후에 이어서 흐름이 진행되고, 또 다른 작업을 만나면 그 작업이 끝날때까지 기다린 이후에 흐름이 이어지게 됩니다.
반대로 오른쪽에 있는 비동기 방식에서는 어떤 작업이 중간에 끼어드는 것과 상관없이 프로그램의 흐름은 쭉 진행되는 것을 볼 수 있습니다.
그리고 중간에 있는 작업들은 작업이 완료되면, 콜백 등을 통해서 작업이 끝났다는 것을 메인 흐름에 알려주게 됩니다.
이것이 동기와 비동기 방식의 차이라고 볼 수 있습니다.
그렇다면 Redux의 관점에서는 동기와 비동기 방식이 어떻게 적용될까요?
이 그림은 앞에 나왔던 동기와 비동기 방식을 비교한 그림을 Redux 관점에서 다시 그려본 것입니다.
Redux에서는 어떤 Action이 발생하면 Reducer가 해당 Action을 처리하게 되는데, Reducer가 Action을 처리하는 과정을 동기와 비동기로 생각해 볼 수 있습니다.
동기 방식에서는 Reducer에서 Action에 대한 처리가 모두 끝나고, Redux Store에 들어있는 State가 업데이트 된 이후에 프로그램의 흐름이 이어집니다.
반대로 비동기 방식에서는 Reducer에서 Action에 대한 처리가 모두 끝나기 전에, 프로그램의 흐름은 계속 이어지게 되고 Reducer에서 Action에 대한 처리가 끝난 이후에 프로그램에 알려주는 형태입니다.
결국 여기서 다른 점은 Reducer가 Action을 처리하는 과정이 동기냐 비동기냐라는 점입니다.
Action이 발생하고 그것을 처리하는 과정을 비동기로 처리해도 될까요?
결론적으로 Redux의 Reducer에서 비동기 방식은 사용할 수 없습니다.
그 이유는 뭘까요?
앞에서 Reducer를 배울 때 나왔던 Reducer의 세 가지 규칙을 다시 한 번 보도록 하겠습니다.
- Only calculate the new state value based on the state and action arguments.
- Not allowed to modify the existing state.Instead, make immutable updates.
- Not do any asynchronous logic or other “side effects”.
여기서 마지막 세 번째 규칙을 다시 한 번 볼까요?
“Not do any asynchronous logic or other “side effects”.”
즉, Reducer에서 비동기 로직이나 side effects를 허용하지 않는다는 규칙입니다.
예를 들면, Reducer 내에서 서버와 통신을 해서 데이터를 받아오거나 하는 등의 동작을 하면 안 된다는 것이죠.
이러한 비동기 로직이나 side effects를 허용하지 않는 이유는, Reducer 외부와 내부를 철저하게 분리하고 리턴 값과 관련이 없는 동작들을 막음으로써 Reducer가 완벽한 pure function이 되게 하기 위함입니다.
그리고 Reducer가 완벽한 pure function이 됨으로써 상태의 변화를 예측하기가 쉬워지고, 예상치 못한 상태의 변화를 막음으로써 예상치 못한 결과가 발생하는 것을 막을 수 있게 되는 것이죠.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.