[React] Redux DevTools 사용하기

안녕하세요, 황대성입니다😁

 

오늘은 Redux를 조금 더 효율적으로 관리할 수 있는 Chrome 확장 프로그램을 사용해봅시다.

 

따라하기 굉장히 쉬우니 여러분들도 한 번 사용해보셨으면 좋겠습니다.

---

제일 처음으로 크롭 앱에서 Redux DevTools를 검색해서 설치합니다.

 

Redux DevTools

---

자신의 프로젝트에서 store를 생성하는 코드에 Redux Devtools Extension을 추가합니다.

 

src/index.js

 

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(sagaMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

---

이렇게 하면 Redux Devtools 설치 및 설정 끝입니다!

 

정말 간단하고 쉽죠? 그럼 이걸 어떻게 사용하고, 활용하는지 알아봅시다.

 

사용 화면

F12를 누르고 메뉴에서 Redux를 찾아 들어갑니다.

 

들어가면 왼쪽은 어떤 액션이 차례대로 사용되었는지 나옵니다.

 

오른쪽에서는 state와 Action이 불러지면서 어떤 값들이 들어왔는지 확인 할 수 있습니다.

 

이렇게 Redux Devtools를 사용하면

• 중복 렌더링 방지
• 효율적으로 State값 관리
• 더 예쁘고, 아름다운 Redux 코드 작성 가능

이라는 이득을 얻을 수 있습니다😁

---

사용하기 정말 쉬우니까 여러분도 사용해보세요!

 

참고 문헌 및 사이트

 

[React] Redux + Saga, 상태관리를 끝장내버렸다.

 

긴 글 읽어주셔서 감사합니다😀