상태 관리에 대해 정리해보자

프로젝트의 규모가 커짐에 따라 관리가 어려워진 상태들이 생겨났고 이를 위해 상태 관리 라이브러리를 사용하고자 합니다.

하지만 다양한 라이브러리 중 어떠한 것을 사용해보는 것이 좋을지에 대한 의문이 생겼고 이러한 의문은 내가 "상태(Status)"가 무엇인지, "상태 관리"가 왜 필요한지에 대해 명확히 모르는 것에서 시작된다고 생각합니다.

따라서 상태와 상태 관리가 무엇인지, 그리고 이를 다루기 위한 Redux를 알아보려 합니다.

상태 관리란?

기존 웹페이지를 개발하는 것 뿐만아니라 이제 웹앱이라고 불리는 개발을 더 많이하게 되었습니다.

사용자들은 더 이상 페이지를 오고가는 UX를 원하지 않고 따라서 하나의 페이지를 띄워놓고 그 안에서 데이터를 주고 받으면서 화면을 실시간으로 변경하는 SPA가 웹 개발의 대부분을 이루게 되었습니다.

상태 그리고 상태 관리

상태는 웹페이지내에서 눈에 보이는 데이터들(ex. 메뉴, 게시글 제목, 게시글 내용)뿐만 아니라 서버와 주고 받아야하는 데이터를 말합니다.

이렇게 눈에 보이는 것과 눈에 보이지 않는 모든 것을 상태라고 하고 이를 관리하는 것을 상태 관리라고 합니다.

상태 관리의 필요성

상태는 각각의 뷰에서 혹은 보이지 않는 영역에서 실시간, 비동기로 변화합니다. 따라서 상태가 "언제, 어떻게, 왜" 변화하였는지 알 수 없어 제어하기 힘든 상황이 되곤 합니다.

기존의 상태 관리

기존에는 상태들을 HTML위주로 관리하였고 따라서 베이스가 되는 DOM에 상태들을 넣어 사용하였습니다.(ex. data-title="안녕하세요.") 이러한 상태들은 각각에 DOM에 저장되었고 결과적으로 서로 다른 DOM에 있는 상태가 변화하는 것을 예상하고 이를 사용하는 것이 힘들어 졌습니다.

Redux

상태 관리 라이브러리에 다른 선택지들도 있겠지만 사용자와 레퍼런스가 많은 Redux를 먼저 살펴보고자 합니다.

Redux는 상태 관리가 어려운 이유로 mutation, asynchronicity 두 개를 이야기하며 마치 이 둘은 멘토스와 콜라 같다고 합니다.

Redux는 이러한 어려움을 해결하고자 상태를 예상가능하게 만들고자 하는 시도를 합니다.

3가지 원칙

Redux는 3가지 원칙을 가지고 있습니다.

Single source of truth

The global state of your application is stored in an object tree within a single store.

Redux에서는 상태 관리를 쉽게 하기 위해 하나의 상태 Tree를 사용합니다. 이는 디버그와 검사를 더욱 쉽게하여 개발을 더욱 빠르게할 수 있게 합니다.

State is read-only

The only way to change the state is to emit an action, an object describing what happened.

State는 action에 의해서만 수정됩니다.

모든 상태 변화를 하게 하는 것은 조금씩 신경써야하는 점이 다를 수 있는데, action을 통해 상태 변화에만 집중하게 합니다.

Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers.

Reducer는 이전의 상태와 action을 받아 다음 상태를 반환하는 순수함수입니다.

Reducer를 하나만 사용하는 것에서 부터 App이 커져갈수록 Reducer를 잘개 쪼개어 상태 Tree의 일부만 다룰 수 있도록 할 수 있습니다.

결론

더 이상 사용자들은 잦은 페이지 전환이 있는 웹페이지를 사용하길 원하지 않고 앱과 같이 자신의 입력에 대한 결과를 실시간으로 확인하는 것을 원합니다. 이를 위해 하나의 페이지에서 다양한 상태들이 발생하고 실시간으로 비동기 처리속에서 다양한 상태를 관리할 필요가 생겼습니다.

Redux는 자신들의 3가지 원칙을 가지고 상태 변화를 예측가능하고 다루기 쉽게 도와주고 있습니다. 이러한 원칙에 맞추어 어떠한 상태를 어떻게 관리할 것인지를 생각하며 Redux를 사용해야 합니다.

참고자료

• [Naver TECH CONCERT] FRONT END 2019 - 데이터 상태 관리. 그것을 알려주마: https://www.youtube.com/watch?v=o4meZ7MRd5o
• Stack Overflow: https://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux
• Redux motivation: https://redux.js.org/understanding/thinking-in-redux/motivation