인프런 커뮤니티 질문&답변

아리마

작성한 질문수

실전 리액트 프로그래밍

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

작성

370

안녕하세요. 좋은 강의 잘 듣고 있습니다.

몇달 전에 리액트 책 한권을 구매하여 개념만 이해하고 있다가 최근 들어 좀 더 흥미가 생겨 심도있게 살펴보고 있는 중인데요.

강의를 듣다보니 리덕스의 state 를 어떻게 관리하는 게 좋을 지 궁금해졌습니다.

화면마다 스토어를 생성하여 관리하는 것이 아니라 하나의 스토어를 가지고 모든 컨테이너 컴포넌트들이 공유하는 것 같은데요.

그렇다면 단일스토어의 state 규격이 명확하게 공유가 되어야 협업을 하면서 문제가 생기지 않을 것 같은데 스토어의 state 를 관리하기 좋은 방법이 있는 지 궁금합니다.

그리고 이러한 스토어의 state 는 시스템 규모가 커지면 메모리 관리가 잘 되지 않을 것 같은데 메모리 관리를 위해 개발자가 별도로 해주어야 하는 부분은 없는지도 알고 싶습니다.

redux react

답변 4

이재승

지식공유자

공통으로 처리하기 위해서는 App 컴포넌트에서 페이지 전환 이벤트를 이용하는 방법이 있습니다.

```

const history = useHistory();

useEffect(() => {

return history.listen(location => {

console.log(`route to: ${location.pathname}`);

// 여기서 원하는 처리 (ex. 액션 발생)

});

}, [history]);

```

로그인 페이지로 Redirect 하는 기능이 만약 모든 페이지에서 필요하다면 위 코드를 이용하면 되구요

그렇지 않다면 결국 페이지별로 필요/불필요 정보가 필요해서 훅을 이용하는 게 적당한 방법이라고 생각됩니다.

다른 방법으로는 페이지를 key로 하고 필요/불필요를 value로 하는 map을 하나 만들어서 관리할 수도 있구요

열심히 공부하시는 게 느껴지네요!

아리마

질문자

강사님 안녕하세요.

state 를 초기화 해주는 내용 강의 잘 들었습니다.

그런데 Component 가 unmount 될 때 Redux State 초기화 처리는 각 페이지마다 개별로 해주어야 되는건가요?

먼가 공통으로 처리해 줄 수 있는 방법은 없을 지 궁금하네요.

이와 마찬가지로 세션없이 화면 진입했을 때, 로그인 페이지로 Redirect 시켜주는 부분도 페이지마다 Hook 을 걸어주어야 하는 지 궁금하구요..

아리마

질문자

친절한 설명 감사드립니다.

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

아! 가만히 생각해보니 combineReducer 를 사용하게 되면 각각의 Reducer 의 이름으로 State 가 생성될테니 중복이 발생할 수 없겠네요 ^^;