6. 리덕스: 최고의 상태 관리 솔루션 - 5

리덕스 개발자 도구로 애플리케이션 디버깅하기

• 크롬 개발자 도구를 사용해 웹 페이지 내용을 바로 조작하는 것처럼 리덕스 개발자 도구를 사용하면 웹 애플리케이션에서 리덕스 작업을 직접 조작할 수 있다. 오늘날 이 도구는 모든 종류의 리덕스 애플리케이션을 개발하는 데 표준 개발 도구로 자리 잡았다.

---

리덕스 개발자 도구란 무엇인가?

• 리덕스 개발자 도구(Redux DevTools)는 애플리케이션의 상태 변경을 디버깅하기 위한 개발 전용 도구다. 핫 리로딩, 액션 히스토리, 실행 취소, 재현 기능을 사용해 리덕스에 대한 시간 이동 디벅깅(time travel debugging) 및 실시간 편집을 수행하는 데 사용된다. 리덕스 개발자 도구를 별도의 애플리케이션으로 설치하거나 클라이언트 애플리케이션에서 리액트 컴포넌트로 통합하고 싶지 않다면 크롬, 파이어폭스, 엣지 브라우저의 브라우저 확장 기능으로도 사용할 수 있다.
• 다음은 순차적으로 발생한 todos 가져오기, 완료, 삭제 작업을 나타내는 개발 도구 스냅숏의 예다.

리덕스 개발자 도구의 UI

• 위 화면에서 왼쪽 패널에는 특정 액션을 선택할 때 필요한 Skip 및 Jump 옵션이 있고, 오른쪽 패널에는 현재 상태, 이전 상태와의 차이 및 다른 유용한 기능이 있다.

♣ 참고 : RTK의 configureStore API는 자동으로 리덕스 개발자 도구와 통합 설정된다.

---

리덕스 개발자 도구의 주요 기능은 무엇인가?

• 리덕스 개발자 도구(Redux DevTools)의 주요 기능은 다음과 같다.
  • 모든 상태와 액션 페이로드를 검사할 수 있는 기능을 제공
  • 액션을 취소하고 이전으로 되롤아갈 수 있음
  • 리듀서 코드가 변경되면 대기 중인 각 액션이 다시 평가됨
  • 리듀서 내부에서 에러가 발생하면 어떤 액션이 에러를 일으켰는지, 그리고 무슨 에러인지 확인할 수 있음
  • persistState() 스토어 강화자를 사용해 페이지가 새로고침되더라도 디버그 세션을 계속 유지할 수 있음
• 리덕스 개발자 도구의 디스패치 액션을 사용해 애플리케이션에서 코드를 직접 작성하지 않고도 액션을 디스패치할 수 있다.

---

정리

• 이번 장에서는 리액트 애플리케이션을 위한 리덕스 상태 관리 솔루션에 대한 포괄적인 지식을 다뤘다. 플럭스를 간단하게 소개하는 것으로 이번 장을 시작했으며, 플럭스 아키텍처, MVC 패턴과의 차이점, 사용 사례를 다룬 뒤에 리덕스 기초, 플럭스와의 차이점, 상태 관리 솔루션으로서의 장점에 대해서도 다뤘다.
• 또한 리덕스의 핵심 원칙, 컴포넌트, 다양한 추가 기능, 데이터 흐름과 관련된 주제를 다퉜다. 그다음으로 비동기 작업에 대한 이해, 리덕스에서 인기 있는 미들웨어 라이브러리, 리액트 애플리케이션에서 그것을 사용하는 방법 및 사용 사례를 살펴봤다.
• 마지막으로 상태 변경을 추적하는 리덕스 개발자 도구와 디버깅 기법을 다뤘다.