리액트 상태 관리 라이브러리인 리덕스에 대해 알아보자!
📍 리덕스(Redux) 라이브러리
JavaScript 상태 관리 라이브러리
📍 Redux의 핵심 원칙
- Single Source of Truth
하나의 중앙 store에서 관리됨. 즉, 동일한 데이터는 항상 같은 곳에서 가져온다는 뜻!
- State is Read-Only
상태는 직접 수정되지 않고 액션(action)을 통해 변경됨.
- Changes are Made with Pure Functions
상태 변경 로직은 순수 함수인 리듀서(reducer)를 통해 정의함.
📍 React Redux의 주요 구성 요소
- Store
Redux의 중심 저장소로 애플리케이션의 상태를 보관함.
- Action
상태를 변경하기 위한 '의도'를 나타내는 객체
- Reducer
state와 action을 입력받아 새로운 상태를 반환하는 순수 함수
- Provider
React Redux에서 애플리케이션을 Redux store에 연결하기 위해 사용하는 컴포넌트로 모든 하위 컴포넌트가 store에 접근할 수 있도록 제공함.
- useSelector
store의 상태를 조회하기 위해 사용함.
- useDispatch
액션을 디스패치(dispatch)하기 위해 사용함.
- connect(Deprecated)
함수형 컴포넌트에서 useSelector와 useDispatch가 도입되기 전 사용되던 HOC(Higher-Order Component)로 현재는 거의 사용되지 않으며, useSelector와 useDispatch로 대체됨.
📍 React Redux의 작동 흐름
① 액션(Action) 생성
사용자의 인터랙션이나 비즈니스 로직에서 액션이 생성됨.
const increment = { type: 'INCREMENT' };↓
② 액션 디스패치(Dispatch)
액션을 dispatch하여 상태 변경을 요청함.
dispatch(increment);↓
③ 리듀서(Reducer) 호출
const newState = reducer(currentState, action);↓
④ 상태 업데이트 및 컴포넌트 리렌더링
새로운 상태가 store에 저장되고, 변경된 상태는 React 컴포넌트에 전달되어 리렌더링됨.
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.
리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. (물론 리덕스의 사용이 유일한 해결책은 아님!)
단순히 전역 상태 관리만 관리한다면 Context API를 사용하는 것만으로도 충분하다.
하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문!
추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공해 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다.
(+) 참고하면 좋을 것 같은 글
https://yamoo9.github.io/react-master/lecture/rd-redux.html
