Redux란 ?
Redux는 자바스크립트 애플리케이션에서 상태를 관리하는 라이브러리로, 주로 리액트와 함께 사용됩니다.Redux는 애플리케이션의 전역 상태를 관리하여, Props drilling 문제를 해결하고 예측 가능한 상태 흐름을 유지하도록 돕습니다.
Redux의 데이터 흐름
Flux 패턴은 Facebook에서 제안한 단방향 데이터 흐름을 유지하는 애플리케이션 아키텍처입니다. 주로 복잡한 상태 관리를 단순화하고 예측 가능하게 만들기 위해 사용되며, Redux도 Flux 패턴에 영향을 받아 설계되었습니다
1. Action
상태에 변경이 필요할 때 Action을 생성합니다. Action은 상태 변경을 위한 타입과 데이터를 포함하는 객체입니다.
2. Dispatch
생성한 Action을 Dispatch하여, Reducer에게 전달합니다. dispatch 메서드를 통해 Action을 Store로 보낼 수 있습니다.
3. Reducer
Store의 상태를 업데이트하는 함수로, 현재 상태와 Action을 입력받아 새로운 상태를 반환합니다. 여러 Reducer를 조합하여 사용 가능하며, 상태의 특정 부분만 처리할 수도 있습니다.
4. Store
모든 상태와 Reducer를 담고 있는 중앙 저장소입니다. Redux 애플리케이션에서 단 하나의 Store만 존재하며, 전역 상태 관리를 통해 데이터 흐름을 일관되게 유지합니다.
Redux의 데이터 흐름은 단방향이며, 위와 같은 4가지 단계로 이루어집니다.
useDispatch
Action을 Dispatch하기 위해 사용하는 Hook으로, 컴포넌트에서 직접 Store의 상태를 업데이트할 수 있도록 돕습니다.
useSelector
Store의 상태를 읽기 위해 사용하는 Hook으로, 필요한 상태를 선택하여 컴포넌트에서 사용할 수 있습니다.
Redux-Thunk
Redux-Thunk는 Redux에서 비동기 작업을 처리할 수 있도록 돕는 미들웨어입니다. 기본적으로 Redux는 순수 함수인 Reducer에서 동작하기 때문에 비동기 처리를 바로 할 수 없습니다. Redux-Thunk를 사용하면, Dispatch 안에서 비동기 함수를 작성하고 비동기 작업을 완료한 후에 상태를 업데이트할 수 있게 됩니다.
이를 통해 API 요청이나 비동기 데이터 처리가 필요한 상황에서 Redux가 보다 유연하게 작동할 수 있습니다.
✅ 참고
