[ 목적 ]
회사에서 사용하는 리액트 프레임워크에서 리덕스를 사용한다.
- 프론트를 많이 안다뤄봐서 프론트에 대한 지식이 하나도 없었는데 좀 키워보자
[ 리덕스란? ]
리덕스는 자바스크립트 애플리케이션(리액트 등)에서 전역적인 상태 관리를 위한 예측 가능한 상태 컨테이너 라이브러리이다.
리덕스의 구성 요소는 위 사진과 같다.
1: 액션 : 상태 변경을 위한 디스패치 되는 객체이다.
- type이라는 필수 속성을 가지고 있으며 추가적인 데이터를 포함할 수 있다.
getIsVariableBtnActivate: (isVariableBtnActivate)=> ({
type:types.GET_IS_VARIABLE_BTN_ACTIVATE,
isVariableBtnActivate
}),
setIsVariableBtnActivate: (isVariableBtnActivate)=> ({
type:types.SET_IS_VARIABLE_BTN_ACTIVATE,
isVariableBtnActivate
}),2. 스토어 : 상태(state)들을 저장하는 저장소.
- 이해하기 쉽게 전역 변수들을 저장할 수 있다.
const INITIAL_STATE = {
isVariableBtnActivate: true
};3. 리듀서 : 디스패처가 상태를 변경을 요청하면 리듀서를 통해 상태를 업데이트한다.
const reducer = createReducer(INITIAL_STATE, {
[types.SET_IS_VARIABLE_BTN_ACTIVATE]: (state, action)=>(state.isVariableBtnActivate = action.isVariableBtnActivate),
});4. 셀렉터 : 상태 저장소에서 가져오고 싶은 데이터를 가져온다.
const isVariableBtnActivate = useSelector((state) => state.wf.isVariableBtnActivate);
정리.
useState로 컴포넌트 내부에서 바뀌는 값을 관리하고 리덕스를 활용해 애플리케이션 전역에서 변수를 관리할 수 있다.
컴포넌트 간 데이터 관리를 할 경우에 용이하다.
5. 사가 : 아직 안써봐서 잘 모름. // 추후 업데이트 예정
리덕스와 사가는 JavaScript 애플리케이션에서 함께 사용되는 라이브러리입니다. 리덕스는 상태 관리를 위한 라이브러리이고, 사가는 리덕스 애플리케이션에서 비동기 작업을 처리하기 위한 미들웨어입니다.
리덕스를 사용하면 애플리케이션의 상태를 단일 스토어에 저장하고, 액션을 통해 상태를 업데이트할 수 있습니다. 그러나 리덕스 자체는 동기적인 작업을 처리하기에 적합하며, 비동기 작업을 처리하기 위해서는 미들웨어가 필요합니다. 이때 사가가 사용됩니다.
사가는 리덕스의 미들웨어로, 액션을 모니터링하고 비동기 작업을 처리하는 역할을 수행합니다. 사가는 제너레이터(Generator)라는 개념을 사용하여 비동기 작업의 흐름을 제어합니다. 제너레이터는 비동기 작업을 순차적으로 실행하거나 중지할 수 있는 함수입니다.
사가는 액션을 감지하고, 해당 액션에 대한 비동기 작업을 수행합니다. 비동기 작업은 사가의 제너레이터 함수 내에서 정의되며, 일반적으로 API 호출이나 데이터 가져오기와 같은 비동기 작업을 처리합니다. 비동기 작업이 완료되면 사가는 다시 액션을 디스패치하여 리덕스 스토어의 상태를 업데이트합니다.
리덕스와 사가의 조합은 비동기 작업을 효율적으로 처리하면서도 상태 관리를 일관성 있게 유지할 수 있는 강력한 도구입니다. 사가는 액션과 비동기 작업 사이의 중간 계층으로 작동하므로, 비동기 작업의 로직이 애플리케이션의 다른 부분과 분리되어 관리될 수 있습니다. 이는 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.