[React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅

 리덕스 관련 두 번째 포스팅입니다. 지난 시간에는 리덕스의 간략한 개념과 사용 방법을 알아봤었는데, 리덕스를 사용하면 통합적인 데이터 관리가 가능하다고 했습니다. 하지만 단지 데이터 관리 기능만이라면 이렇게 주목받거나 어려운 기능은 아니었을 것입니다. 그래서 오늘은 정말 강력한 기능인 리덕스 디버깅을 배워보도록 하겠습니다.

 

크롬 브라우저를 기준으로 설명드리겠습니다. 먼저 리덕스 크롬 확장 도구를 설치하기 위해 구글에 검색으로 'chrome redux devtools' 를 찾거나, 아니면 chrome 웹 스토어에서 'Redux DevTools' 를 검색해 설치합니다.

 

리덕스 확장 도구 추가

 

설치가 완료되면 명령 프롬프트에서 리덕스 개발자 확장 라이브러리를 추가합니다.

> yarn add redux-devtools-extension --dev

 

이제 마지막으로 확장 도구를 프로그램 소스와 연동만 하면 됩니다. 시간을 아끼기 위해 지난 시간에 했던 카운트 업 소스를 그대로 이용하겠습니다. 혹시 모르시는 분들은 꼭 아래 링크를 확인하시고 개념을 파악하시기 바랍니다.

[React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초

 

// ..\test_project\src\components\CountUpRedux.jsx

...
    // 정의한 리듀서로 스토어 생성
    this.store = createStore(
      reducer,
      {
        // 데이터 초기화
        count: 1,
        isTen: false,
        // 콜백 함수 연결
        countUp: this.countUp,
        resetCount: this.resetCount,
      },
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    );
...

 

 기초 시간에 했던 소스에서 createStore()의 세 번째 인자에 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()을 추가했습니다. 이제 디버깅 도구와 소스가 연결됐습니다. 그럼 크롬의 스토리북 화면으로 이동해 F12키로 개발자 모드에 들어가 Redux 탭을 선택하면 아래와 같이 나옵니다.

 

※ 브라우저 화면에서 마우스 오른쪽 버튼 클릭 후, 메뉴의 Redux DevTools를 선택해도 가능

 

리덕스 디버깅 도구

 

 왜 리덕스가 강력한 기능인지는 디버깅 도구에 있다고 해도 과언이 아닙니다. 너무 많은 기능이 있어 이번 글에는 핵심적인 기능들 위주로 설명해 보겠습니다. 먼저 데이터를 저장하는 행위인 액션입니다. 카운트나 리셋 버튼을 누르면 SET_COUNT, RESET_COUNT 처럼 소스에서 정의한 액션의 이름이 자세한 로그 형태로 남습니다. 또한 순서대로 쌓인 로그를 선택하면, 그 액션이 행해진 상태의 데이터 값이나 여러 정보를 아래 탭에서 확인 가능합니다.

 

State 데이터 정보

리셋 액션 Diff 비교

 

 또한 아래에 있는 재생버튼을 누르면 액션을 시간순으로 재현해보는 것도 가능하고, 데이터를 json형태로 받거나 아니면 반대로 데이터를 임의적으로 넣어 보는 것도 가능합니다. 이렇듯 리덕스 사용법이 다른 데이터 기능보다 복잡한 이유도, 데이터의 관리뿐만이 아닌 데이터의 추적이나 디버깅 등을 위해 설계됐기 때문입니다.

 

 오늘은 여기까지입니다. 실무에서 리덕스는 주로 서버와의 데이터를 동기화하는데 많이 사용됩니다.

왜 그러한지는 점점 이해가 가실 거라 믿고, 다음 시간에는 조금 더 실무에 가까운 리덕스 사용법을 다루겠습니다.

 

리덕스 참 대단하죠?

---

2020/10/23 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리