Redux
리덕스란, “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 이다.
리덕스가 필요한 이유
리덕스는 애플리케이션의 상태 관리를 효율적으로 하기 위해 사용된다. 상태 관리가 복잡해질수록 컴포넌트 간의 데이터 전달이 어려워지며, 이로 인해 코드의 가독성과 유지보수성이 떨어질 수 있다. 리덕스를 사용하면 중앙에서 상태를 관리할 수 있어 상태의 일관성을 유지하고 예측 가능한 상태 관리를 할 수 있다.
Global state와 Local state
Local state는 개별 컴포넌트 내에서만 관리되는 상태이다. 특정 컴포넌트에서만 필요한 데이터는 Local state로 관리하는 것이 적합하다.
Global state는 여러 컴포넌트에서 공통으로 필요로 하는 상태이다. 이런 상태를 중앙에서 관리하면 데이터 동기화와 상태 관리가 용이하다.
Context API가 있음에도 Redux로 Global state를 관리하면 좋은 이유?
Context API는 전역 상태 관리가 가능하지만, 복잡한 상태 관리 로직을 구현하기에는 한계가 있다. Redux는 다음과 같은 이유로 더 효과적일 수 있다.
성능 최적화 : 하위의 모든 컴포넌트를 리렌더링 하게 할 수 있는 Context API 와 달리 Redux는 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트할 수 있어 성능 관리가 용이.
상태 로직의 중앙화와 일관성 : Redux는 애플리케이션의 상태를 하나의 저장소(store)에 저장한다. 상태 로직이 중앙에서 관리되기 때문에 더 일관성 있고 예측 가능한 상태 변경이 가능하다. 또한 상태 변경 로직은 리듀서에 의해 처리되기 때문에 디버깅과 테스팅이 용이하다.
강력한 미들웨어와 개발 도구: Redux는 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능을 구현할 수 있다. 또한 Redux DevTools와 같은 강력한 개발 도구를 통해 상태 변화 모니터링, 롤백 등의 기능을 제공한다.
유지보수 용이 : 액션, 리듀서, 스토어로 구분된 구조 덕분에 코드의 가독성과 유지보수성이 향상된다.
리덕스의 흐름
-
View에서 액션이 일어난다
사용자의 입력이나 이벤트에 의해 액션이 발생한다. -
dispatch에서 action이 일어나게 된다
디스패치 함수가 호출되면서 액션 객체가 전달된다. -
action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
미들웨어가 액션을 가로채어 추가 작업을 수행한다. -
middleware에서 명령 내린 일을 수행하고 난 뒤, reducer 함수를 실행한다.
미들웨어가 작업을 마치면 리듀서 함수가 실행된다. -
reducer의 실행 결과 store에 새로운 값을 저장한다.
리듀서는 현재 상태와 액션을 기반으로 새로운 상태를 계산하여 스토어에 저장한다. -
store의 state에 subscribe하고 있던 UI에 변경된 값을 준다.
스토어에 저장된 새로운 상태가 UI에 반영된다.
액션 객체란?
액션 객체는 반드시 type이라는 키를 포함해야 하며, 리듀서로 보낼 "명령"이다. 이 객체는 상태 변화를 설명하는 정보를 포함한다.
액션 객체 type의 value는 대문자로 작성
액션 객체의 type 값은 대문자로 작성하는 것이 일반적이다. 이는 상수 값을 대문자로 작성하는 JavaScript의 규칙을 따르기 위함이다.
디스패치란?
디스패치는 액션 객체를 리듀서로 보내는 "전달자" 함수이다. useDispatch()라는 훅을 이용하여 디스패치를 사용할 수 있다. 디스패치는 스토어의 내장 함수 중 하나이며, 액션을 발생시키는 역할을 한다.
리듀서란?
리듀서는 디스패치를 통해 전달받은 액션 객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 "변화를 만들어내는" 함수이다.
설마 그 '디스패치'?