[Redux, Redux-Saga] 직접 구현해보며 동작 원리 이해하기 (번역)

Lost with Redux and sagas? Implement them yourself! - Sébastien Castiel

본 포스팅은 위 링크의 포스팅을 번역(자체 의역)한 것입니다. 문제가 될 시 즉시 삭제하겠습니다.

---

당신은 React, Redux, 또는 Redux-Saga와 같은 라이브러리를 매일같이 사용할 수도 있다. 그리고 그것들에 아주 능숙해졌을 수도 있다. 그래서 다른 사람들에게 그것들이 얼마나 좋고 나쁜지, 그리고 그것들을 사용해야 할지 말아야 할지에 대해 설명할 수준이 되었을지도 모르겠다. 그런데 한편으로는 당신이 그것들을 일종의 마법이라고 생각하고 있을 수도 있다. 그것들은 보이지 않는 부분에서 많은 일을 수행하지만, 그것들이 어떠한 원리로 동작하는지는 설명하지 못할 수 있다는 것이다. 이는 디버깅이나 테스트를 어렵게 만들고, 그것들의 모든 기능들을 활용하는 것도 어렵게 만든다.

 

필자는 Redux-Saga의 경우 정확히 그랬다. 필자의 개인적인 생각으로는, 특정 라이브러리가 동작하는 방식을 가장 잘 이해하는 법은 그것을 직접 한 번 구현해보는 것이다. 완전하게는 아니더라도 간단한 버전으로 말이다.

 

이 글은 Redux 또는 Redux-Saga에 대한 소개가 아니다. 그러한 내용들은 이미 웹 이곳저곳에 퍼져 있고, 심지어는 각각의 공식 다큐멘테이션까지 존재한다(Redux, Redux-Saga). 따라서 필자는 이 글에서 당신이 이미 기본적인 내용을 알고 있는 상태에서 그것들이 내부적으로 어떻게 동작하는지 궁금해한다고 가정하겠다.

 

즉, 이 글에서는 Redux와 Redux-Saga의 기본적인 구현 상세가 어떻게 되는지 보여줄 것이다. 만약 당신이 그것들을 React 프로젝트에서 사용하고 있다면, 이 글을 읽은 후에는 그것들이 더 이상 마법 같은 일만은 아니라는 것을 깨닫게 될 것이다.

 

최종 소스 코드와 샘플들은 이 샌드박스에서 제공하고 있다. 당장 결과를 확인해보고 싶다면 참고해도 좋다.

 

1. Redux 스토어 만들기

Redux의 기본적인 개념은 바로 스토어이다. 스토어를 만들기 위해서는 리듀서와 초기 상태 값이 필요하다. 만약 어떠한 상태 값도 입력으로 주어지지 않았을 때 리듀서가 반환하는 값으로 초기 상태 값을 결정한다면, createStore() 함수를 정의할 때 인자로서 리듀서 하나만 받도록 할 수 있다. 다음 코드를 보자.

const createStore = (reducer) => ({
  state: reducer(undefined, 'redux-init'),
  // ...
});

 

그리고 액션이 디스패치 되면 스토어는 리듀서로 새로운 상태 값을 계산하고 자신의 상태를 업데이트해야 한다. 이를 위해 dispatch() 함수를 다음처럼 정의한다.

dispatch(action) {
  this.state = reducer(this.state, action);
}

 

기본적인 기능은 이와 같다. 그러나 현재의 스토어는 상태 업데이트에 구독할 수가 없기에 별로 쓸모가 없다. 이러한 상태 구독 메커니즘을 구현하기 위해 우리는 이벤트 에미터(Event Emitter)라는 것을 사용할 것이다. 마찬가지로, 액션을 위한 이벤트 에미터도 사용할 것이다. 이러한 이벤트 에미터들은 뒤에서 Redux-Saga를 구현할 때 사용하게 될 것이다. 다음과 같이 createStore() 함수를 수정해주자.

import { EventEmitter } from 'events';

export const createStore = (reducer) => ({
  state: reducer(undefined, 'redux-init'),
  stateEmitter: new EventEmitter(),
  actionsEmitter: new EventEmitter(),

  dispatch(action) {
    this.state = reducer(this.state, action);
    this.actionsEmitter.emit(action.type, action);
    this.stateEmitter.emit('new_state');
  }
});

 

이게 끝이다! 당신한테 너무 쉬워 보이는가? 이것이 정말 제대로 동작하는지 한 번 확인해보자.

 

먼저 초기 상태와 리듀서를 다음과 같이 정의하자.

const initialState = { name: undefined };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'setName':
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

 

다음으로는 스토어를 만들고 이를 전역적으로 접근 가능하도록 만들자. 콘솔에서 접근하기 위함이다.

const store = createStore(reducer);
window.store = store;

 

이제 콘솔을 통해 상태가 올바르게 초기화되었는지 확인해보고, 상태 업데이트를 구독한 뒤 액션을 디스패치 해보자.

store.state;
// Object {name: undefined}

store.stateEmitter.on('new_state', () => console.log('New state:', store.state));
// EventEmitter {...}

store.dispatch({ type: 'setName', payload: 'Jean Valjean' });
// undefined
// New state: Object {name: "Jean Valjean"}

 

모든 것이 잘 되었다. 그렇지 않은가? 우리의 Redux 구현은 고작 10줄가량밖에 되지 않는다! 물론 실제로 Redux는 더 많은 기능들이 구현되어 있고 최적화도 아주 잘 되어 있을 것이다. 예를 들면 미들웨어 같은 것들이 그렇다. 마음먹고 이것들도 우리의 구현에 추가한다고 하면 못 할 건 없다. 그러나 그건 당신이 하고 싶으면 하는 걸로 하자 :)

 

2. Redux-Saga 이펙트 구현하기

우선 알고 있어야 하는 것은, 사가는 제네레이터 함수라는 것이다. 빠르게 요약하자면, 제네레이터 함수란 yield 명령어를 마주쳤을 때 실행이 중지되고 나중에 그곳부터 다시 실행이 재개될 수 있는 일종의 함수이다. 만약 이에 대해 자세히 이해하고 싶다면 Generators chapter on ExploringJS를 읽어보거나 what Babels transpiles a generator function to를 확인해보라. 다시 말하지만, 그것들에 마법은 없다!

 

사가라는 제네레이터 함수를 이해하려면 이펙트(Effect)의 개념을 먼저 이해해야 한다. 사가는 순수 함수이다. 즉, HTTP 요청을 보내거나, 무언가를 로깅하거나, 스토어에 접근하는 등의 사이드 이펙트를 수행하지 않는다. 사가의 트릭은 "나는 상태에 존재하는 이 값이 필요하니까, 그 값을 얻어내서 나에게 다시 돌아와"와 같은 메시지와 함께 자신의 실행을 중단시키는 것이다. 이 메시지가 바로 이펙트(Effect)이다.

 

Redux-Saga는 다음과 같은 기본적인 이펙트들을 제공한다. 우리가 곧 구현해볼 것들이다.

 

• select : 셀렉터(Selector)로 상태 값을 읽어온다.
• call : (비동기 혹은 동기) 함수를 호출한다.
• put : 액션을 디스패치 한다.
• take : 특정 타입의 액션을 기다린다.
• fork : 새로운 실행 맥락을 가진 새로운 사가를 생성한다.

 

이펙트는 단순한 JavaScript 객체이다. 액션처럼 말이다. 그리고 그것들의 각 타입은 그것을 쉽게 생성하기 위한 헬퍼 함수를 가진다.

export const take = (actionType) => ({ type: 'take', actionType });
export const select = (selector) => ({ type: 'select', selector });
export const call = (fn, ...args) => ({ type: 'call', fn, args });
export const put = (action) => ({ type: 'put', action });
export const fork = (saga, ...args) => ({ type: 'fork', saga, args });

 

실제 Redux-Saga의 경우, 사가는 미들웨어를 하나 생성하고 그것을 Redux 스토어에 추가함으로써 실행된다. 그러나 우리의 구현에서는 단순함을 유지하기 위해 runSaga()라는 함수를 직접 만들어볼 것이다. 이는 Redux 스토어와 실행할 사가를 인자로 전달받는다.

export async function runSaga(store, saga, ...args) {
  // ...
}

 

이제 우리의 사가와 그것이 트리거하는 이펙트들을 다뤄볼 때가 됐다. 먼저 call 이펙트부터 시작하여, 하나씩 차근차근 살펴보자.

 

3. call 이펙트로 함수 호출하기

사가와 JavaScript의 제네레이터 함수를 가장 쉽게 이해하는 방법은, 기본적으로 그것들이 이터레이터를 반환한다는 사실을 기억하는 것이다. 이터레이터에 의해 반환되는 값은 하나의 이펙트로, 우리는 해당 이펙트가 기대하는 동작을 수행한 뒤 이터레이터의 다음 값을 요청하게 된다. 다음 코드는 우리가 구현할 runSaga() 함수의 골격에 해당한다.

const it = saga(); // saga is a generator function: function* saga() { ...

let result = it.next(); // result has `done` and `value` properties
while (!result.done) {
  const effect = result.value;

  // do something with the effect

  result = it.next(/* value we want to return to the saga */);
}

 

이를 바탕으로, 다음과 같은 runSaga() 함수의 첫 번째 구현을 살펴보자. 지금은 call 이펙트만 처리할 수 있는 수준이다.

export async function runSaga(store, saga, ...args) {
  try {
    const it = saga(...args);

    let result = it.next();
    while (!result.done) {
      const effect = result.value;

      logEffect(effect); // implemented somewhere

      switch (effect.type) {
        case 'call':
          result = it.next(await effect.fn(...effect.args));
          break;

        default:
          throw new Error(`Invalid effect type: ${effect.type}`);
      }
    }
  } catch (err) {
    console.error('Uncaught in runSaga', err);
  }
}

 

기본적으로 우리는 사가에 의해 반환된 이터레이터를 일반적인 이터레이터처럼 처리한다. 우리는 이터레이터가 반환한 이펙트가 무엇인지에 따라 무슨 동작을 수행할지 결정하게 된다. 여기서 우리는 call 이펙트에 의해 참조되는 함수를 명시된 인자와 함께 호출한다.

result = it.next(await effect.fn(...effect.args));

 

이때, 반환되는 Promise 객체가 Resolve 될 때까지 기다리기 위해 await 명령어를 사용한 것에 주목하라. (물론 반환된 값이 Promise 객체가 아니어도 정상 동작한다!) await 명령어는 yield 명령어(정확히는 yield * 명령어)와 꽤나 유사하다. 실제로 ES2015부터 async/await 문법이 도입되기 전까지는 특정 라이브러리들이 해당 동작을 실현하기 위해 제네레이터 함수들을 사용하곤 했다.

 

이제 다음과 같은 첫 번째 구현을 예시로 하여 우리가 구현한 runSaga() 함수를 테스트해보자.

export const getUser = async (id) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const response = await res.json();
  return { id: response.id, name: response.name };
}

const showUserName = (user) => {
  console.log('User:', user.name);
}

function* mySaga() {
  const user = yield call(getUser, 1);
  yield call(showUserName, user);
}

// I created a basic store, you can find it in src/samples/store.js
// at https://codesandbox.io/embed/thirsty-glade-0g196.
runSaga(store, mySaga);

 

그러면 콘솔에서 다음과 같은 결과를 확인할 수 있을 것이다.

 

 

runSaga() 함수는 첫 번째로 하나의 call 이펙트를 가로챈 뒤, getUser() 함수를 호출하고 그 결과를 기다린다(호출하는 함수가 비동기 함수이기 때문). 그러고 나서 그 결과를 사가에게 넘기며 사가의 실행을 다시 개시시킨다. 이후 두 번째 call 이펙트를 가로채게 되고, 이번에는 showUserName() 함수를 호출하게 된다. 이것이 전반적인 실행 흐름이다.

 

4. select, put 이펙트로 Store 읽고 쓰기

다음 단계는 select, put 이펙트를 통해 Redux 스토어를 대상으로 상태 값을 읽고 쓰는 것이다. 우리는 이미 앞서 이펙트를 처리하기 위한 로직의 골격을 마련해 두었다. 따라서 이해하는 데 큰 어려움은 없을 것이다.

case 'select':
  result = it.next(effect.selector(store.state));
  break;

case 'put':
  store.dispatch(effect.action);
  result = it.next();
  break;

 

select 이펙트의 경우, 주어진 셀렉터를 Redux 스토어의 상태 값을 넣어서 호출하기만 하면 된다. 그리고 put 이펙트의 경우, 주어진 액션을 Redux 스토어에 디스패치 하면 그만이다. 이제 우리의 예시를 조금 개선해서 이를 테스트해보도록 하자.

 

다음 코드를 보자. 유저의 ID를 Redux 스토어에서 읽어온 뒤, 해당 유저의 정보를 불러오기 위해 API를 호출한다. 마지막으로는 그렇게 불러온 유저의 정보를 Redux 스토어에 저장하기 위해 액션을 디스패치 한다.

function* mySaga() {
  const userId = yield select((state) => state.userId);
  const user = yield call(getUser, userId);
  yield put({ type: 'getUserSuccess', payload: user });
}

 

이제 그 실행 결과를 콘솔에서 살펴보면 다음과 같을 것이다.

 

 

아주 잘 동작하는 걸 확인하였다. 당신은 이러한 종류의 사가가 매우 흔하다는 것을 인정할 것이다. 그런데 뭔가가 아쉽다. 당신이 사가를 작성할 때는 특정 액션에 반응하고 싶어 하는 경우가 많기 때문이다. 여기서는 단순히 우리의 사가를 실행했는데, 어떻게 하면 특정한 액션이 디스패치 됐을 때만 이러한 프로세스가 진행되도록 할 수 있을까?

 

일반적으로, 실제 Redux-Saga에서 우리는 특정 타입의 액션이 디스패치 될 때 특정한 사가를 실행하도록 하기 위해 takeEvery 헬퍼를 사용한다. 하지만 takeEvery를 구현하기 전에, 우리는 먼저 두 개의 기본적인 이펙트를 구현해봐야 한다. 바로 take와 fork이다.

 

5. take 이펙트로 특정 액션 기다리기

take 이펙트는 특정 타입의 액션이 디스패치 되기를 기다렸다가, 디스패치 되면 사가를 다시 실행시키는 역할을 수행한다. 우리 예시에서 이를 적용한다고 하면, 오직 "getUser" 타입의 액션이 디스패치 될 때만 유저 정보를 가져오도록 할 수 있을 것이다.

 

take 이펙트를 구현하는 것은 어렵지 않다. 단순히 Redux 스토어의 액션 이벤트 에미터(actionsEmitter)에 구독을 함으로써, 특정 조건에 매칭 되는 액션이 디스패치 되면 이를 사가에게 넘기며 사가가 다시 실행되도록 하면 된다. 이 내용을 Promise 객체에 기반한 접근 방식으로 프로그래밍해보면 대략 다음과 같을 것이다. (Promise와 관련한 내용은 여기에서 다루었다.)

case 'take':
  const action = await new Promise(
    resolve => store.actionsEmitter.once(effect.actionType, resolve)
  );
  result = it.next(action);
  break;

 

이제 앞서 보여준 우리의 사가를 다음과 같이 수정해보자. "getUser" 타입의 액션이 디스패치 될 때만 실행되도록 하는 것이다.

function* mySaga() {
  yield take('getUser');
  const userId = yield select((state) => state.userId);
  const user = yield call(getUser, userId);
  yield put({ type: 'getUserSuccess', payload: user });
}

// ...
// Dont’t forget to make the store available for tests:
window.store = store;

 

위 예시를 실행해보고 콘솔의 출력 결과를 확인하자. 다음과 같을 것이다. 처음에는 take 이펙트 하나만 트리거가 되었다가, "getUser" 타입의 액션을 디스패치 하는 순간 사가의 나머지 코드들이 실행되는 것을 확인할 수 있다.

 

 

이 정도면 거의 완벽하다. 하지만 문제가 하나 있다. 동일한 액션을 다시 한번 디스패치 하면 아무 일도 일어나지 않을 것이다. 그 이유는 take 이펙트가 다음에 디스패치 될 해당 타입의 액션만 구독할 뿐, 해당 타입의 모든 액션을 구독하는 것이 아니기 때문이다. 모든 "getUser" 타입의 액션에 반응하도록 하는 하나의 해결책은 우리의 사가를 무한 루프로 구현하는 것이다. 다음과 같이 말이다.

function* mySaga() {
  while (true) {
    yield take('getUser');
    const userId = yield select((state) => state.userId);
    const user = yield call(getUser, userId);
    yield put({ type: 'getUserSuccess', payload: user });
  }
}

 

아주 잘 동작한다. 이는 일반적으로 사용이 금지되는 무한 루프와는 다른 종류의 무한 루프이므로 두려워할 필요 없다. 단순히 (계속해서 다음 값을 참조할 수 있는) 무한 이터레이터일 뿐이다. 즉 해당 사가는 절대 종료하지 않을 것이다. 루프 안의 내용은 "getUser" 타입의 액션 하나가 디스패치 될 때마다 딱 한 번 실행된다.

 

그러나 이는 여전히 완벽하지 않다. 만약 두 타입의 액션들을 구독하고 싶다면 어떡할까? 예를 들어 "getUser" 타입의 액션과 "getDocuments" 타입의 액션을 기다리는 것이다. take 이펙트는 현재의 사가 실행을 블록 하기 때문에, 다음과 같이 작성하는 것은 문제가 있다.

while (true) {
  yield take('getUser');
  // do something for user

  yield take('getDocuments');
  // do something with documents
}

 

물론 가능은 하겠다만, 이는 예상하는 동작을 보여주지 못할 것이다. 이는 단순히 두 타입의 액션들을 번갈아 처리할 뿐이다.

 

여러 개의 액션들을 take 이펙트로 처리하기 위해서는 우리의 사가를 포크(Fork)함으로써 여러 개의 실행 맥락(Execution Context)을 만들어내야 한다. 이것이 바로 다음에 설명할 fork 이펙트의 핵심이다.

 

6. fork 이펙트로 현재 Saga 포크 하기

이펙트를 이해하는 것과 실제로 Redux-Saga에서 사용할 수 있는 만큼 구현하는 것은 상당히 어렵지만, 우리는 다음과 같이 단순하게 구현해볼 것이다.

case 'fork':
  runSaga(store, effect.saga, ...effect.args);
  result = it.next();
  break;

 

기본적으로, 새로운 실행을 개시하기 위해 단순히 우리의 runSaga() 함수를 다시 호출하도록 하였다. 사가를 포크(Fork)할 때는 인자로 실행할 또 다른 사가를 전달해줘야 한다. 현재 실행되고 있는 부모 사가와 부모 사가에 의해 포크 되어 새로 실행될 자식 사가는 각각 독립적으로 실행될 것이다. 따라서 이제 코드를 다음과 같이 작성할 수 있게 되었다.

function* usersSaga() {
  while (true) {
    yield take('getUser');
    // do something for user
  }
}

function* documentsSaga() {
  while (true) {
    yield take('getDocuments');
    // do something with documents
  }
}

function* mySaga() {
  yield fork(usersSaga);
  yield fork(documentsSaga);
}

 

위 세 개의 사가는 병렬적으로 실행된다. 유저와 관련된 사가, 다큐먼트와 관련된 사가, 그리고 메인 사가이다. 메인 사가는 두 자식 사가를 포크 한 뒤 즉시 종료된다는 점에 주목하자.

 

▼ 사가의 포크(Fork)와 관련한 다이어그램 (출처 : https://velog.io/@jy0791/redux-saga)

 

여기서 관찰할 만한 사실이 하나 있다. 우리 예시와 같이, 자식 사가를 포크 하면 해당 사가는 무한 루프를 만들고 그 안에서는 특정 타입의 액션을 기다리는 식의 프로그래밍 패턴은 아주 흔하다는 것이다. 그런데도 당신은 이렇듯 fork 이펙트와 take 이펙트를 자주 써가면서 프로그래밍하는 방식을 모르고 있을 수 있다. 그 이유는 높은 확률로 당신이 takeEvery라는 매우 유용한 도구를 사용하고 있기 때문일 것이다. takeEvery에 대해 이어서 한 번 알아보자.

 

7. takeEvery로 특정 액션에 반응하기

어렵게 생각하지 말자. takeEvery는 우리가 지금까지 했던 것들을 조금 더 쉽게 할 수 있도록 도와주는 헬퍼일 뿐이다. 이는 특정 타입의 액션에 대응하는 자식 사가를 포크 하고, 그 안에서 무한 루프를 만들어서 해당 타입의 모든 액션들을 기다리도록 한다. 그리고 해당 타입의 액션이 디스패치 되면 이를 인자로 삼아서 새로운 사가를 실행하게 된다. 이때 디스패치 된 액션을 인자로 삼아서 새로운 사가를 실행한다는 설명에서 난관에 부딪혔을 수 있다. 설명을 위해, 다음 코드를 보자.

export function* takeEvery(actionType, saga) {
  yield fork(function* newSaga() {
    while (true) {
      const action = yield take(actionType);
      yield* saga(action);
    }
  });
}

 

이해가 안 간 부분(기울임체 문장)에 해당하는 코드에 yield* 명령어가 존재한다. 이를 이해하면 저 문장도 이해할 수 있을 듯하다. yield* 명령어는 어렵게 생각하지 말자. 단순히 '동일한 실행 맥락에서 해당 사가를 실행하겠다'는 의미에 불과하다. 이펙트를 트리거하기 위한 일반적인 yield 명령어와는 다르다는 걸 알 수 있다. 그럼 이제 최종적인 우리의 사가 코드를 살펴보자. takeEvery를 호출할 때도 yield* 명령어를 사용하는 것을 볼 수 있다.

function* userSaga() {
  const selectUserId = (state) => state.userId;
  const userId = yield select(selectUserId);
  const user = yield call(getUser, userId);
  yield put({ type: 'getUserSuccess', payload: user });
}

function* mySaga() {
  yield* takeEvery('getUser', userSaga);
}

 

코드에서 볼 수 있듯이, 우리의 구현에서 takeEvery는 이펙트가 아니라 다른 이펙트를 트리거하기 위한 또 다른 사가에 불과하다.

 

콘솔에서 실행 흐름을 추적해보면 출력 결과는 다음과 같다.

 

 

액션을 디스패치 하기 전에, newSaga라는 이름의 사가가 포크 되고(fork) 이것은 "getUser" 타입의 액션을 기다린다(take). 이제 해당 타입의 액션을 디스패치 하면 select, call, put 이펙트가 차례대로 트리거 되고, 그 작업이 모두 끝나면 다시 새로운 "getUser" 타입의 액션이 디스패치 될 때까지 기다리는 것을 반복한다.

 

Note) 실제 Redux-Saga에서는 yield* 명령어를 사용할 필요가 없고, yield 명령어를 사용할 수 있다. 왜 그러한 차이가 발생하는지는 실제로 takeEvery가 어떻게 구현되어 있는지 보면 이해할 수 있을 것이다. 이에 대해서는 공식 문서를 참고하자.

 

이것으로 Redux-Saga의 구현에 대한 설명을 마친다. 샘플과 함께 최종 소스 코드를 보고 싶다면 이 샌드박스를 방문하면 된다.

 

8. 마무리의 말

이 글을 통해 Redux와 Redux-Saga에 대해 더 잘 이해할 수 있게 되었기를 바란다. 이미 이해하고 있겠지만, 이 글은 그것들을 직접 구현하고 배포에서 사용할 수 있도록 하는 것이 목적이 아니다. 

 

이제 당신은 이러한 라이브러리들에 어떠한 마법도 존재하지 않는다는 것을 깨달았을 것이다. 그 밖의 다른 대부분의 오픈 소스 라이브러리들도 마찬가지이고 말이다. 최소화된, 그리고 순박한 버전의 구현을 직접 시도해봄으로써 당신은 그것들이 보이는 것만큼 그리 복잡하지는 않다는 것을 알게 된다. 이는 숙련된 개발자에게도 해당되는 내용이다.

 

React, Redux, 그리고 Redux-Saga는 매우 훌륭하다. 그런데 이는 누군가가 매우 복잡한 개념을 창조해냈기 때문이 아니다. 단지 누군가가 많은 시간을 들여서 복잡한 문제들을 해결하기 위한 단순한 개념들을 만들어냈기 때문이다.