필요한 dispatch 함수나 상태는 무조건 store에 해야해. 로컬이랑 스토어에 나눠서하면 그건 스파게티 코드아니야?
누군가에게 이런 얘기를 들었던 적이 있다. React / Redux를 사용하면서 onChange같은건 하나 만들어놓고 가져와서 계속 사용할 수 있는거 아니야? 라고 생각했었다.
React state vs Redux state
React state는 컴포넌트 지역에서 저장되는 값으로 하위 컴포넌트에 props를 활용하여 참조 할 수 있게 해준다.
Redux state는 store라는 가상 공간이 있다 가정하고 store에 모든 state를 저장하여 필요한 컴포넌트에서 불러와 사용할 수 있다.
프로젝트의 규모가 크고 복잡해지면, 해당 state가 어떻게 변화하는지 어디서 변화를 하는지 알기 쉽지 않기에 Redux를 활용해서 상태관리를 하게 되었다.
그럼 React / Redux State 말고 다른 저장공간이 있을까?
당연히 있다
-
localStorage(Browser)
-
Server
적재적소에 알잘딱깔센하게 저장공간을 선택하는 기준
state duration - 하나의 상태가 유지되어야하는 기간
Short-term state
Input 의 text 같이 프로젝트 전반의 영향을 주지 않는 상태들은 로컬로 관리하는것을 추천한다.
Medium-term state
웹 또는 앱에서 API 호출을 통한 데이터, 앱의 flow에서 중간에 유실되면 안되는 데이터는 store로 관리하는것이 좋아보인다.
Long-term state
새로고침을 해도 프로젝트에 영향을 주지 않는 데이터는 브라우저의 LocalStorage, Server 를 사용해서 관리하여 새로고침에도 유실되지 않게 관리한다.
절대적인 룰이 아닌 권장 사항입니다.
참고: https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/
코린이