Redux 를 넘어 SWR 로(1)

October 03, 2020 - [react, swr]

이 글에서는 오랫동안 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 가 제공하는 여러가지 연산자들의 쓰임새들을 추가로 학습해야 하는 부담이 생겼습니다. 어짜피 개발자는 공부를 멈출 수 없는 직업인지라 운명이라 여기고 군말없이 필요한 모든 것을 학습한 후에 프로젝트의 모든 비동기 처리들을 깔끔하게 사가로 분리해 내었습니다. 개발자로서 기술스택이 하나 더 늘어난 것 같아 자신감도 +1 업되었습니다. 🙂

그런데 오늘 비즈니스 요건이 바뀌었네요. 😐 간단한 상태를 하나 추가할 필요가 생겼습니다. 새로운 상태를 추가하기 위해 리듀서를 수정하고 액션들을 정의하고 비동기 처리를 위해 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 를 사용할 때 흔하게 부딪힐 수 있는 문제 3가지를 잘 설명한 것 같습니다. 요약하자면 다음과 같습니다.

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

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

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

잠시 쉬었다가 다음 글에서 살펴보는 것이 좋겠네요.🙂