Redux 애플리케이션과 서버 간 데이터 교환

이 섹션은 Redux에서 달성한 것에서 멈추지 않고 이 튜토리얼의 끝까지 가기로 결심한 진취적인 학생들을 위한 것입니다. 다음 두 섹션에서 우리는 Redux 애플리케이션의 비동기 로직 작업, 백엔드와의 연결 및 데이터 교환 방법에 대해 다룰 것입니다.

이전 섹션에서 우리는 Redux 애플리케이션의 작동이 동기식 메커니즘을 기반으로 한다는 것을 알고 있습니다. 주요 작업 단계는 애플리케이션에서 어떤 이벤트가 발생할 때 액션을 디스패치하고, 그런 다음 store에서 리듀서 함수에 의해 상태를 업데이트하며, 상태 변경에 대해 애플리케이션 컴포넌트에 알리고, 그에 따라 컴포넌트에 새로운 상태 값을 표시하는 것입니다.

실제로는 애플리케이션에 HTTP API 요청 작업 및 외부 서버로부터 데이터 수신과 같은 비동기 로직이 필요한 경우가 많습니다. 따라서 우리의 '동기식' Redux store가 이러한 비동기 로직과 함께 작동할 수 있도록 하기 위해 소위 middleware가 사용됩니다. 이는 우리 애플리케이션의 store와, 예를 들어 이 튜토리얼 장에서 작업을 시작할 서버 사이의 중개자 또는 연결 고리 역할을 하는 소프트웨어입니다.

Redux를 위해 많은 middleware가 만들어졌지만, 그 중에서도 가장 널리 사용되며 비동기 로직과 함께 작동하는 Redux 애플리케이션에서 공식적으로 권장되는 것은 아직까지 Redux Thunk입니다. 이 소프트웨어는 우리가 store와 상호작용하기 위해 setTimeout, Promises, async/await 와 같은 비동기 로직을 포함할 수 있는 일반 함수(또는 thunk)를 사용하도록 도와줍니다. 용어 자체에 관해서, thunk는 지연된 작업을 수행하는 코드입니다.

이제 Redux에서 비동기 로직과 어떻게 작업할지 조금 알아보았으니, 애플리케이션에서 이 단계를 구현할 수 있습니다. 우리 애플리케이션이 외부 서버와 상호작용하여 데이터를 받고 보낼 수 있도록 해야 합니다. 다시 말해, 우리 앞에는 매력적이고 매우 중요한 주제가 기다리고 있습니다. 시작해 봅시다.