tech December 18, 2020

Redux를 넘어 SWR로(1)

By Keating

이 글에서는 오랫동안 Redux를 이용한 상태관리를 해오다가 최근 SWR을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다.

이 글이 도움이 되실 독자들

Redux를 이용한 상태관리에 현기증이 나신 분들
상태관리가 필요한데 Redux, MobX, Recoil 중 어떤 것을 사용하는 것이 좋을까 고민하시는 분들
redux-thunk & redux-saga 등을 이용해 비동기 처리를 나름 열심히 하고 있지만 이 방법이 최선일까 고민을 해보신 분들
로컬 스토어 상태와 원격 서버 데이터를 동기화하는 일이 귀찮으신 분들

서론

리액트를 사용한 웹개발시 상태관리의 필요성에 대해서는 더 자세히 이야기하지 않겠습니다. 당신은 이미 상태관리의 필요성과 중요성을 충분히 공감하고 있을 것입니다.

현재 어떤 상태관리 라이브러리를 사용하고 계신가요? 아마도 Redux, MobX, Recoil 3가지 중 하나를 사용하고 계실 것 같습니다. 제가 아직 Recoil은 직접 사용해 보지 않았기 때문에 Recoil 에 대한 이야기를 자세히 언급하지는 않겠습니다. 저는 주로 Redux를 사용해 왔었고 Redux의 verbose한 코딩량 때문에 MobX를 잠깐 만져본 경험은 있습니다. 그렇기 때문에 저는 Redux에 대한 내용을 중심으로 이야기를 풀어가 보도록 하겠습니다.

방법의 차이는 있겠지만 리액트 상태관리 라이브러리들이 해결하고자하는 문제는 결국 하나일 것입니다. 여러 리액트 컴포넌트에서 함께 사용할 전역 상태를 정의하고, 컴포넌트에서 각 상태에 접근하는 방법과 해당 상태를 변이시키는 방법을 제공하는 것이겠지요.

Redux는 어떻게 상태관리 문제를 해결하는가

Redux는 아마도 리액트 진영에서 가장 많이 사용하는 상태관리 라이브러리일 것입니다. Redux는 선언적인 함수형프로그래밍 패러다임을 사용하여 상태를 정의하고 상태를 변이시킬 수 있는 방법을 제공합니다.

Redux를 이용한 간단한 상태관리 코드를 보겠습니다. 뻔한 코드를 보여드리는 이유는 이후 SWR을 이용한 코드와 비교하기 위함입니다. 늘 등장하는 카운터 예제입니다.

카운터의 초기상태와 변이방법을 아래와 같이 리듀서로 정의합니다.

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

컴포넌트에서는 아래와 같이 상태에 접근할 수 있습니다

import {useSelector} from 'react-redux'

function Counter(){
    const data = useSelector(state => state)
    return <div>count: {data}</div>
}

변이 방법은 아래와 같습니다.

store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

Redux는 순수함수인 리듀서와 순수객체인 액션을 통해 스토어의 상태와 변이방법을 정의합니다. 이는 매우 직관적이기 때문에 동작원리를 이해하는 것이 어렵지 않습니다. 순수함수와 순수객체 기반의 간결한 코드가 함수형 프로그래밍 특유의 아름다움을 자아냅니다. npm 모듈을 사용하지만 블랙박스가 아닌 유리상자처럼 내부가 훤히 다 보이는 것 같습니다. 저는 개인적으로 함수형 프로그래밍을 선호하기 때문에 Redux 에서 이렇게 문제를 해결하는 방법을 좋아합니다.😊

비동기 처리를 위한 Redux 의 노력

간단한 카운터 앱과 같이 동기적인 문제를 해결할 때에는 Redux는 그 아름다움을 잃지 않습니다. 그런데 요건이 변경되어 카운터의 값을 증가시킬지 감소시킬지 여부를 서버로부터 가져와야 한다고 해봅시다. 이와 같이 현실세계의 비동기적인 문제들을 만날 때 Redux 의 우아함은 흔들리게 됩니다.

Redux는 태어날 때부터 비동기적 상황을 처리할 수 있는 힘을 가지고 있지 않았기 때문이죠. Redux는 자신의 아름다움을 지켜내기 위해 비동기적 문제들에 대한 복잡하고 지저분한 처리들을 Redux 미들웨어에게 위임합니다.

현실세계의 비동기적 문제를 해결하기 위한 미들웨어들의 진흙탕 싸움이 이제부터 시작됩니다. 가장 먼저 redux-thunk가 깃발을 듭니다. redux-thunk는 비동기 액션이라는 컨셉을 이용해 나름 간단하게 비동기 문제를 처리해 냅니다.

// redux-thunk 의 비동기액션
function asyncAction(){
  return (dispatch) => {
    fetchHowTo('/api/how-to').then(howTo => {
      dispatch({type: howTo})
    })
  }
}
store.dispatch(asyncAction())

리듀서는 기존대로 순수함수의 모습을 지켜냈지만 액션들이 프라미스로 오염되는 것은 막을 수 없었습니다. 리듀서는 동기적으로 동작하지만 액션은 비동기로 동작하는 이 모습이 많은 사람들에게 불편함을 주었습니다. 개발자는 스토어에 액션을 던지면서도 해당 상태가 정확히 어느 시점에 변이될 지 예상할 수 없는 어려움이 생긴 것이지요.

이러한 문제를 해결하기 위해 redux-saga가 등장했습니다. redux-saga 는 액션에 포함된 비동기 로직을 별도 제너레이터 함수로 분리해 냅니다. 덕분에 비동기 액션들을 제거할 수 있게 되었고 Redux 는 다시 이전의 아름다움을 회복할 수 있었습니다.

// redux-saga 의 비동기처리 제너레이터 함수
function* sagaHowto() {
   const howTo = yield call(fetchHowTo, '/api/how-to')
   yield put({type: howTo})
}
function* mySaga() {
  yield takeEvery("HOW_TO", sagaHowto);
}
store.dispatch({type: 'HOW_TO'})

비동기 처리의 복잡함과 지저분함은 온전히 saga의 몫이 되었죠. 리덕스와 완전하게 분리된 saga들은 순수하게 비즈니스 로직으로서 관리를 할 수 있어 좋습니다. 게다가 각 saga 함수들은 제너레이터지만 순수함수이기 때문에 단위테스트를 작성하는 일도 훨씬 수월해 졌습니다.😊

하지만 이로 인해 개발자는 익숙치 않은 제너레이터의 동작원리와 redux-saga가 제공하는 여러가지 연산자들의 쓰임새들을 추가로 학습해야 하는 부담이 생겼습니다. 어짜피 개발자는 공부를 멈출 수 없는 직업인지라 운명이라 여기고 군말없이 필요한 모든 것을 학습한 후에 프로젝트의 모든 비동기 처리들을 깔끔하게 사가로 분리해 내었습니다.

그런데 비즈니스 요건이 바뀌었네요. 간단한 상태를 하나 추가할 필요가 생겼습니다. 새로운 상태를 추가하기 위해 리듀서를 수정하고 액션들을 정의하고 비동기 처리를 위해 saga 파일도 하나 추가합니다.간단한 상태를 하나 추가하려고 30줄의 코드가 추가되었습니다. 새로운 파일도 2개가 늘었습니다.😐

상태 초기화 문제

하지만 여전히 우리를 괴롭히는 한가지 문제가 남아 있습니다. 바로 전역 상태의 초기화와 동기화 문제인데요. 우선 초기화 문제부터 살펴 봅시다.

points 상태는 초기값으로 원격 서버의 데이터를 사용한다고 해봅시다. 그리고 points 상태를 사용하는 3개의 화면 page1, page2, page3 이 있다고 합시다. 그리고 page4 는 points 상태를 사용하지 않습니다. 그렇다면 points 상태는 어느시점에 초기화를 하는 것이 좋을까요?

App.js 전역 컴포넌트에서 points 상태를 초기화하는 것이 좋을까요? 그렇다면 page4 화면만 사용하는 사용자는 필요하지 않은 points 상태까지 fetch 하는 문제가 있겠죠.

그렇다면 해당 상태를 필요로 하는 각 화면 page1, page2, page3 에서 points 상태를 직접 초기화하는 것은 어떨까요? 아래와 같은 코드를 해당 화면들에 모두 추가하는 것입니다

useEffect(() => {
  fetch('/api/points').then(data => {
    store.dispatch({type: 'INIT', data})  
  })
}, [])

page1에서 page2로 이동할 경우에는 데이터를 다시 fetch 할 필요가 없을 것이므로 아래와 같이 분기문을 추가해주는 것이 좋겠습니다.

const points = useSelector(state => state.points)
useEffect(() => {
  if(points){
    return 
  }
  fetch('/api/points').then(data => {
    store.dispatch({type: 'INIT', data})  
  })
}, [])

위 코드를 page1, page2, page3에 모두 추가해 주었습니다. 반복적인 코드가 추가되는 것이 왠지 달갑지 않자만 어쩔 도리가 없습니다.😰

상태 동기화 문제

상태 초기화는 그런데로 적절히 마쳤습니다. 그런데 위와 같이 초기화한 상태는 화면을 새로고침하지 않는 한 최초 초기화 상태를 계속 유지하게 될 것 입니다.

만약 points 상태가 1분 단위로 변경이 발생하는 데이터이기 때문에 최소 1분 주기로 상태도 함께 갱신해야 한다는 요건이 들어오면 어떻게 해야할까요?

어렵지는 않습니다. 각 화면에서 setInterval 이나 웹소켓을 이용해 데이터를 실시간으로 동기화 해주는 로직을 추가하면 되겠지요. 작업을 마치니 코드는 점점 복잡해지고 그만큼 유지보수 해야 할 코드의 양도 많아졌습니다.

TL;DR;

지금까지 Redux를 사용하면서 쉽게 발견할 수 있는 세 가지 문제를 살펴보았는데요, 요약하자면 다음과 같습니다.

상태와 변이방법을 정의하기 위한 리듀서와 액션의 코딩량이 많다.
효과적으로 상태를 초기화하기 위한 고민이 필요하다.
지속적으로 로컬 스토어 상태를 원격 서버 상태와 동기화해야 하는 추가 작업이 필요하다.

1번은 Redux만의 문제일 것이고 MobX나 Recoil이 이에 대한 대안이 될 수도 있다고 생각합니다. 2, 3번의 문제는 MobX, Recoil 을 사용할 때에도 동일하게 만날 수 있는 문제일 것입니다. 하지만 2,3번의 문제가 엄밀하게는 상태관리 라이브러리의 문제라고 볼 수는 없습니다. 원격의 데이터를 적절하게 fetch 하는 문제는 처음부터 상태관리 라이브러리들이 해결하고자 했던 문제는 아니었기 때문입니다. 하지만 이는 상태관리 라이브러리를 사용할 때 일반적으로 부딪히는 문제이고 이후 이어질 SWR을 소개하기 위해 포함시켰습니다.

이제야 SWR을 소개할 차례가 된 것 같군요. SWR은 무엇이며 어떻게 SWR이 Redux의 앞서 언급된 문제들을 해결하고 궁극적으로 완전히 Redux를 대체할 수 있는지 2편에서 살펴보겠습니다.

Keating님의 블로그에 게재된 글을 편집하여 매드업 테크블로그에서 다시 소개드립니다.

매드업 채용 바로가기