Redux란?
Redux는 자바스크립트 애플리케이션을 위한 강력한 상태 관리 라이브러리로, React에 한정되지 않고 여러 프론트엔드 프레임워크에서 사용할 수 있다. Redux를 사용하면 애플리케이션의 상태를 예측 가능하고 효율적으로 관리할 수 있으며, 유지보수와 디버깅, 테스트 작업이 용이해진다.
Redux의 장점
- 예측 가능한 상태: 순수 함수를 사용하여 상태를 관리함으로써, 애플리케이션의 상태 변화를 예측 가능하게 만든다.
- 유지보수 용이: 명확한 구조와 규칙을 통해 코드의 유지보수가 용이해진다.
- 디버깅 용이: Redux DevTools와 같은 도구를 통해 상태 변화를 시각적으로 모니터링하고 디버깅할 수 있다.
- 테스트 용이: 순수 함수와 명확한 상태 변화 규칙 덕분에 테스트가 용이하다.
Redux의 3원칙
- 단일 진실의 원천(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어 안에 하나의 객체 트리로 저장된다.
- 상태는 읽기 전용(State is Read-Only): 상태를 변경하기 위해서는 액션을 통해서만 가능하며, 액션은 상태를 어떻게 변경할지 설명하는 객체다.
- 순수 함수로 변경(Changes are Made with Pure Functions): 액션에 의해 상태 트리를 어떻게 변화시킬지를 결정하는 리듀서는 순수 함수다.
<순수함수>
- reducer 함수는 이전 state와 action 객체를 파라미터로 받는다.
- 파라미터 이외 값(외부의 변수)에 의존하면 안 된다.
- 이전 state는 절대로 건드리면 안 되고, 변화를 준 새로운 state 객체를 만들어 반환해야 한다.
→ state mutation 금지, (spread operator 사용)
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환한다.
Redux 구성 요소
- Store: 애플리케이션의 상태와 로직을 포함하는 객체다.
getState(),dispatch(action),subscribe(listener)등의 메소드를 제공한다.
- Action: 상태 변화를 일으킬 때 참조하는 객체로,
type프로퍼티를 필수로 가진다. 액션 크리에이터는 액션 객체를 반환하는 함수다.
- Reducer: 이전 상태와 액션을 받아 새 상태를 반환하는 순수 함수다. 상태 변경 로직을 담당한다.
Store
store.getState: 현재 store의 state를 출력한다.
store.dispatch(type: 'action', data: 'obj'): store에 등록한 reducer에 액션 객체를 전달한다.
store.subscribe(이벤트): 작업이 store에 전달될 때마다 호출된다.
replaceReducer(다음 리듀서): store에서 사용하는 reducer를 바꾼다.
Action
→ 앱에서 스토어에 운반할 데이터를 말하며, 자바스크립트 객체 형식으로 존재한다.
Action Creator
- 액션(객체)을 만들어주는 함수로, state 변경을 위한 주문서다. 추상화해서 만들면 좋다.
Reducer
→ Action이 Reducer에 전달되어 Store에서 State를 업데이트 한다.
→ Action을 Reducer에 전달하기 위해
dispatch 메소드를 사용한다.