[개발도구] Redux dev tools

리액트로 웹앱을 개발하기 시작하게 되면, Redux dev tool을 설치하게 된다.

 

게시글에 들어가기 앞서 Redux에 대한 개념부터 짚고 가도록 하겠다.

 

---

✨ Redux(리덕스란)?

JavaScript(자바스크립트) 상태관리 라이브러리이며, 본질은 Node.js 모듈이다.

 

✨ Redux의 3가지 원칙

1. Single Source of Truth

- 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미.

2. State is read-only

- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능.

- 같은 맥락으로, 리덕스에서도 액션(action) 이라는 객체를 사용해서만 상태 변경이 가능.

3. Changes are made with pure functions

- 변경은 순수함수로만 가능. Reducer와 연관되는 개념.

- Store(스토어) - Action(액션) - Reducer(리듀서)

 

✨ Redux의 상태 관리를 도식화해보자.

데이터는 한 방향으로만 흘러야하기 때문에, 이런 모양을 띄게 된다.

✨ Redux에서 위의 개념을 구현하는 2가지 방법

1. mapStateToProps()

2. Redux hooks

- 비교적 최근에 나온 기술.

- useSelector / useDispatch

 

✨ Redux의 장점

1. 순수함수를 사용하기 때문에 상태를 예측 가능하도록 만들어준다.
2. 복잡한 상태관리들과 비교하면, 유지보수가 비교적 쉬운 편이다.
3. 크롬 확장 프로그램인 Redux Dev Tool 을 사용하여 action과 state log 기록 시 디버깅에 유리하다. 
4. 순수함수를 사용하기 때문에 test(테스트)를 붙이기가 용이해진다.

---

🐱‍💻 Redux Dev Tool 설치방법

 

1. 크롬을 켠 뒤, 구글에서 redux dev tools 를 검색한다.

제일 상단의 chrome.google.com 의 Redux DevTools 를 클릭하도록 하자.

혹은 link 클릭 > https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd 

Redux DevTools

 

2. 설치를 하면 되는데, 필자의 경우 이미 깔려있기 때문에 'Chrome에서 삭제'라는 글의 버튼이 뜬다.

3. 설치가 완료 되면, redux dev tools 를 사용할 프로젝트에서 store을 생성하는 코드에 Redux Devtools Extension을 추가해주면 완료.

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

4. 사용법: 구현된 react app 화면에서 F12(개발자도구) 를 눌러 redux 를 클릭하고 State, Action 등을 확인해주면 된다.

---

이렇게 Redux Devtools 를 사용하게 되면.. 장점!

중복 렌더링도 방지할 수 있고

효율적으로 State값도 관리할 수 있고

더 예쁘고, 더 아름다운 Redux 코드도 작성이 가능하게 된다

 

 

 

 

 

 

 

 

 

 

---

참고문헌

https://bigstar-vlog.tistory.com/47 

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/