리덕스의 상태관리 문의드립니다.

Question

안녕하세요. 좋은 강의 잘 듣고 있습니다. 몇달 전에 리액트 책 한권을 구매하여 개념만 이해하고 있다가 최근 들어 좀 더 흥미가 생겨 심도있게 살펴보고 있는 중인데요. 강의를 듣다보니 리덕스의 state 를 어떻게 관리하는 게 좋을 지 궁금해졌습니다. 화면마다 스토어를 생성하여 관리하는 것이 아니라 하나의 스토어를 가지고 모든 컨테이너 컴포넌트들이 공유하는 것 같은데요. 그렇다면 단일스토어의 state 규격이 명확하게 공유가 되어야 협업을 하면서 문제가 생기지 않을 것 같은데 스토어의 state 를 관리하기 좋은 방법이 있는 지 궁금합니다. 그리고 이러한 스토어의 state 는 시스템 규모가 커지면 메모리 관리가 잘 되지 않을 것 같은데 메모리 관리를 위해 개발자가 별도로 해주어야 하는 부분은 없는지도 알고 싶습니다.

이재승 · Answer

공통으로 처리하기 위해서는 App 컴포넌트에서 페이지 전환 이벤트를 이용하는 방법이 있습니다. ``` const history = useHistory(); useEffect(() => {   return history.listen(location => {     console.log(`route to: ${location.pathname}`);     // 여기서 원하는 처리 (ex. 액션 발생)   }); }, [history]); ``` 로그인 페이지로 Redirect 하는 기능이 만약 모든 페이지에서 필요하다면 위 코드를 이용하면 되구요 그렇지 않다면 결국 페이지별로 필요/불필요 정보가 필요해서 훅을 이용하는 게 적당한 방법이라고 생각됩니다. 다른 방법으로는 페이지를 key로 하고 필요/불필요를 value로 하는 map을 하나 만들어서 관리할 수도 있구요 열심히 공부하시는 게 느껴지네요!

아리마 · Answer

강사님 안녕하세요. state 를 초기화 해주는 내용 강의 잘 들었습니다.  그런데 Component 가 unmount 될 때 Redux State 초기화 처리는 각 페이지마다 개별로 해주어야 되는건가요? 먼가 공통으로 처리해 줄 수 있는 방법은 없을 지 궁금하네요. 이와 마찬가지로 세션없이 화면 진입했을 때, 로그인 페이지로 Redirect 시켜주는 부분도 페이지마다 Hook 을 걸어주어야 하는 지 궁금하구요..

아리마 · Answer

친절한 설명 감사드립니다. 우선, 제가 타입스크립트의 개념은 아직 모르고 있는데요.. (참 아쉬운 부분이죠..) combineReducers 를 적용해 보았을 때, 크롬의 Rdedux Devtool 을 확인해 보니 여러 Reducer 에서 사용하는 State 를 한 눈에 볼 수 있었습니다. 이렇게 전체 State 의 구조를 확인할 수 있어야 State 가 중복되는 현상이 발생하지 않을 거 같아서 질문을 드렸습니다. 아! 가만히 생각해보니 combineReducer 를 사용하게 되면 각각의 Reducer 의 이름으로 State 가 생성될테니 중복이 발생할 수 없겠네요 ^^;

이재승 · Answer

네 말씀하신대로 보통 여러 스토어가 아니라 하나의 스토어로 관리합니다. `state 규격`이라고 표현하신 부분을 제가 확실히 이해했는지 모르겠지만 나름대로 답을 하자면, 리덕스에서 제공하는 combineReducers 를 사용해서 state를 관심사별로 여러 영역으로 쪼개서 관리합니다. 만약 타입스크립트를 사용한다면 state의 구조를 한 눈에 파악할 수 있겠죠 (타입스크립트 강추입니다) 그리고 메모리 측면에서 말씀하신 부분은, 필요없어진 상태값은 해제해줘야하는데요 보통은 메모리가 부족해서라기 보다는 비동기 처리(API 통신)를 하는 과정에서 오래된 값이 사용자에게 노출되는 문제가 자주 발생합니다. 만약 state를 페이지별로 영역을 만들어서 관리한다고 가정하면, 해당 페이지를 벗어날 때 그 영역의 state를 초기화해주는 방법을 사용하기도 합니다. 참고로 제가 위에서 설명한 내용은 프로젝트2에서 확인하실 수 있습니다.