[React]리덕스 이해하기 - 2

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다.

리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 하게 상태 관리를 할 수 있습니다.

이 장에서는 리덕스 미들웨어의 개념을 이해하고, 미들웨어를 사용하여 비동기 작업ㅇ르 처리하는 방법을 알아보겠습니다.

 

미들웨어란

리덕스 미들웨어는 액션을 디스패치했을 때(=액션을 발생시키는 것) 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다.

 

리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러 가지가 있습니다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가로 디스패치할 수도 있습니다.

 

실제 프로젝트를 작업할 때 미들웨어를 직접 만들어서 사용할 일은 그리 많지 않습니다. 다른 개발자가 만들어 놓은 미들웨어를 사용하면 되기 때문이죠. 하지만 미들웨어가 어떻게 작동하는지 이해하려면 직접 만들어 보는 것이 가장 효과적입니다. 간단한 미들웨어를 직접 만들어 보면 미들웨어의 작동 방식을 제대로 이해할 수 있습니다. 원하는 미들웨어를 찾을 수 없을 때는 상황에 따라 직접 만들거나 기존 미들웨어들을 커스터마이징하여 사용할 수도 있습니다.

 

여기서 액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치되기 전후의 상태를 콘솔에 보여 주는 로깅 미들웨어를 작성해 보겠습니다.

const loggerMiddleware = store => next => action => {
	// 미들웨어 기본 구조
}

export default loggerMiddleware;

위 코드에서 리덕스 미들웨어의 구조를 볼 수 있습니다. 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어서 쓴다면 다음과 같은 구조입니다.

const loggerMiddleware = function loggerMiddleware(store) {
	return function (next) {
    	return function (action) {
        	// 미들웨어 기본 구조
        }
    }
}

미들웨어는 결국 함수를 반환하는 함수를 반환하는 함수입니다. 여기에 있는 함수에서 파라미터로 받아오는 store는 리덕스 스토어 인스턴스를, action은 디스패치된 액션을 가리킵니다. 이 두가지 값은 이미 익숙하지요? 반면에 next는 익숙하지 않습니다. next 파라미터는 함수 형태이며, store.dispatch와 비슷한 역할을 합니다. 하지만 큰 차이점이 있는데, next(action)을 호출하면 그다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그다음 미들웨어가 없다면 리듀서에게 액션을 넘겨준다는 것입니다.

 

redux-thunk는 함수 형태의 액션을 디스패치하여 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파리미터로 넣어서 사용하는 원리입니다. 그래서 구현한 thunk 함수 내부에서 원하는 API 요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 했습니다.

 

제너레이터 함수 이해하기

redux-saga에서는  ES6의 제너레이터 함수라는 문법을 사용합니다. 보통 일반적인 상황에서는 많이 사용되지 않기 때문에 초반에 진입 장벽이 있을 수 있습니다. 우선 제너레이터 함수 문법에 대해 알아봅시다. 이 문법의 핵심 기능은 함수를 작성할 때 함수를 특정 구간에 멈춰 놓을 수도 있고 원할 때 다시 돌아가게 할 수도 있다는 것입니다.

다음과 같은 함수가 있다고 가정해 봅시다.

function generatorFunction () {
	console.log('안녕하세요');
    yield 1;
    console.log('제너테리터 함수');
    yield 2;
    console.log('function*');
    yield 3;
    return 4;
}

const generator = generatorFunction();
generator.next();
// 안녕하세요
// { value: 1, done: false }