[Expo] SDK 50 이상 Expo 프로젝트에서 Redux 상태 관리 디버깅하기

 

 

 

최근 React Native Expo 프로젝트를 진행하면서 상태 관리를 위해 Redux를 도입하게 되었습니다. 그러나 기존의 React Native Debugger가 제대로 작동하지 않는 문제를 경험했고, 이를 해결하는 과정에서 효과적인 대체 방법을 공유해봅니다.

 

1. Redux Devtools Expo Dev Plugin 설치

먼저 다음의 명령어로 플러그인을 설치해 줍니다.

npx expo install redux-devtools-expo-dev-plugin

 

2. Redux Store에 플러그인 적용하기

설치가 완료되었다면, 루트 Redux Store 설정 파일에 다음과 같이 플러그인을 적용해줍니다.

import devToolsEnhancer from 'redux-devtools-expo-dev-plugin';

const store = configureStore({
  reducer: rootReducer,
  devTools: false,
  enhancers: getDefaultEnhancers => getDefaultEnhancers().concat(devToolsEnhancer()),
});

 

(주의)

devTools 옵션을 false로 지정하고, Redux Devtools를 위한 enhancer를 추가합니다.

 

 

3. Expo 프로젝트 실행하기

Redux Store 설정이 완료되면, 다음 명령어를 통해 Expo 프로젝트를 실행합니다.

npx expo start

 

Expo 번들러가 실행되고 앱이 작동되면, 실제 디바이스나 시뮬레이터 화면에서 다음 단계를 수행합니다.

• Shift + M 키를 눌러 Expo 메뉴를 엽니다.
• 나타난 메뉴에서 Redux DevTools 옵션을 선택합니다.

 

4. Redux DevTools 사용 확인

이후 자동으로 브라우저에 Redux DevTools 창이 열리고, Redux 상태가 실시간으로 추적되는 것을 확인할 수 있습니다.

 

Redux DevTools 창에서는 액션 발생 이력, 상태 변경 내용, 현재 상태 등을 확인하고 디버깅할 수 있다. (실시간)

 

 

정상적으로 상태 추적이 되고 있는 것을 확인할 수 있다.