React Local State vs Redux State(Store) 언제, 어떤 것을 사용해야 하나?

이 글은 React State vs. Redux State: When and Why?의 내용을 참고하여 작성하였습니다.

  

        

React State와 Redux State의 차이

React state는 컴포넌트에 지역적으로 저장되는 값으로 다른 컴포넌트에게 유동적인 값을 props 형태로 전달하는데 사용됩니다.

Redux state는 전역 state로 어떤 컴포넌트라도 store를 통해서 접근가능하고 Container 컴포넌트에 데이터를 집중화시켜 하위 컴포넌트에서 데이터를 접근하지 않더라도 state를 쉽게 전달할 수 있게 해줍니다.

Redux가 탄생하게된 이유는 간단하게 수많은 state를 관리하기 위해서입니다.

프로젝트 규모가 커지고 복잡해지면서 상태가 많아지고 이를 관리하기 힘들어져 상태가 언제, 왜, 어떻게 변화되었는지 알기 어렵고 관리가 힘들어져 이를 관리하고자 Redux가 만들어졌습니다.

State 기간

Short-term: 빠르게 변화하는 데이터

UI의 텍스트 필드의 문자, 또는 리스트의 아이템을 필터링 하는 것과 같이 빠르게 변화 일어나고 프로젝트의 전반적으로 변화를 주지않는 데이터는 지역 상태(Local State)를 사용하는 것이 유리하다.

Medium-term: 앱 실행동안 유지되는 데이터

API를 통해서 로드된 데이터 나 새로고침 이전까지 유지되어야 하는 데이터로 프로젝트의 전반적으로 영향을 주는 데이터는 Redux Store(State)를 사용하는 것이 유리하다.

예를 들면, 전역으로 사용되는 유저 정보나 submit 양식 제출하여 사용자 프로필 정보 업데이트를 해야하는 경우

Long-term: 여러 페이지간의 방문, 새로고침 동안 유지되어야 하는 데이터

이 경우에는 서버의 데이터 베이스 또는 브라우저의 로컬 스토리지(local storage)에 저장하여 사용한다.

결론:

redux의 개발자인 gaearon(Dan Abramov) 역시도 UI element 나 form의 입력 정보의 상태 변화와 같이 수명이 짧고 앱 전역적으로 영향을 주지 않는 상태들은 local state를 사용하고,

cached users, 나 post와 같이 앱 전역에 사용되고  복잡한 문제를 일으키는 상태는 Redux store를 사용하길 권장하고 있습니다.

하지만 이것은 권장하는 방법이지 절대적인 것이 아닙니다.

Stateless function component형태로 모든 상태를 redux store에 저장하거나, 반대로 redux를 사용하지 않고 모든 상태를 local state를 이용할 수 있습니다. 개발자 스스로가 경험을 하면서 어떤 경우에 무엇을 사용하는 것이 좋은지 판단하고 규칙을 정하는 것이 가장좋은 방향이라고 생각합니다.

참고자료: https://github.com/reactjs/redux/issues/1287,

https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/

https://medium.com/@Dev_Bono/%EB%8B%B9%EC%8B%A0%EC%97%90%EA%B2%8C-redux%EB%8A%94-%ED%95%84%EC%9A%94-%EC%97%86%EC%9D%84%EC%A7%80%EB%8F%84-%EB%AA%A8%EB%A6%85%EB%8B%88%EB%8B%A4-b88dcd175754