redux-devtools 소개

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

이번 글에서는 redux-devtools에 대해서 알아보도록 하겠습니다.

---

redux-devtools는 이름에 담긴 의미 그대로,

Redux를 사용해서 개발할 때 디버깅을 도와주는 도구입니다.

 

보통 Redux를 사용해서 개발하다 보면 action과 reducer들이 굉장히 많아지게 되는데,

그렇게 되면 어떤 action들이 실행되어서 현재의 state가 되었는지 파악하기가 굉장히 어렵습니다.

짧은 시간에 수많은 action들이 빠르게 실행되기 때문이죠.

 

또한, 각각의 action들의 내부 payload를 파악하기도 힘들고,

해당 action으로 인해 state에 어떤 변화가 생겼는지를 파악하기도 힘듭니다.

 

그래서 나온 것이 바로 redux-devtools입니다.

redux-devtools를 사용하면 위에서 말씀드린 부분들을 모두 투명하게 확인할 수 있습니다.

때문에 Redux를 사용해서 개발한다면 필수적으로 설치해야할 도구라고 할 수 있습니다.

---

redux-devtools는 크롬 플러그인으로 설치해서 사용합니다.

설치를 위해서는 아래 링크에 접속해서 설치하기 버튼을 누르시면 됩니다.

 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko 

Redux DevTools

 

설치하게 되면 크롬의 개발자 도구에 아래와 같이 Redux라는 탭이 생깁니다.

해당 탭을 누르면 아래 화면과 같이 redux-devtools를 보실 수 있습니다.

 

그리고 아래 링크는 redux-devtools 공식 GitHub repository입니다.

관심있는 분들은 들어가셔서 Star를 눌러두시면 좋을 것 같습니다.

 

https://github.com/reduxjs/redux-devtools

GitHub - reduxjs/redux-devtools: DevTools for Redux with hot reloading, action replay, and customizable UI

---

redux-devtools를 설치한 상태로 Redux를 사용한 웹 애플리케이션을 띄우게 되면,

redux-devtools에서 Redux store의 상태와 dispatch된 모든 action들의 정보를 투명하게 확인할 수 있습니다.

그리고 각각의 action을 따라가면서 하나씩 상태의 변화를 관찰할 수도 있습니다.

이런 기능들을 사용하면 Redux를 사용한 애플리케이션 개발에 굉장히 큰 도움을 받으실 수 있습니다.

Redux를 사용해서 개발중이시라면 꼭 설치해서 사용해보시기 바랍니다!

감사합니다.