새 프로젝트를 만들때마다 넣어주는 라이브러리들..
매번 필요해서 넣지만 왜 얘를 사용하는지 정확히 하는 일이 뭔지 매번 찾아보고 사용한다. 나는 참 1회용 뇌를 갖고 있다.
벨로퍼트님의 블로그를 여러번 읽었지만 아직도 헷갈린다. 기억보다 기록을 님 글도 여러번 읽었다. ㅎ
이건 내 잘못이 아니라 라이브러리가 너무 많은 탓이다.(암튼 그럼)
그래서 이번 글에선 내 식대로 내가 기억하기 좋게 적어놓을 것이다.
//reducer 불변성 관리하게 해주는 모듈
"immer": "^10.0.2",
//redux를 react와 연동해서 사용하기 편리하도록 만든 라이브러리
//액션단계에서 connect라는 함수가 사용된다는 차이점 존재
"react-redux": "^8.1.2",
"redux": "^4.2.1",
"redux-actions": "^3.0.0",
//redux를 통해 바뀔 이전 state, dispatch 실행으로 인해 바뀐 state가 콘솔에 찍혀 디버깅 쉽게 해줌.
"redux-logger": "^3.0.6",
//미들웨어
"redux-thunk": "^2.4.2",Redux
컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 관리, 글로벌 상태 관리
- redux는 컴포넌트에 종속되지 않고, 컴포넌트 바깥에서 상태관리.
- 프로젝트 루트레벨에서 store라는 곳에 state를 저장하고, 모든 컴포넌트는 store에 구독을 하면서 state와 그 state를 바꾸는 함수를 전달 받음.
- 함수를 바꿈으로 state가 바뀌면 해당 state를 바라보고 있는 컴포넌트는 모두 리렌더링 됨.
Action객체 생성 -> Dispatch함수의 인자로 -> Reducer함수로 전달-> 저장소 Store의 상태 변경->React 화면 렌더링. 단방향으로만 흐름
Redux-thunk
redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다.
리덕스 미들웨어란?
액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할수 있게 하는 함수. 연달아 두번 리턴하는 함수.
미들웨어 라이브러리는 redux-thunk, redux-saga, redux-observable, redux-promise-middleware 등이 있다.
EX)
- 특정 조건에 따라 액션이 무시되게 만들 수 있다.
- 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있다.
- 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
- 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
- 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있다.
- 비동기 처리. 리액트 앱에서 우리가 만약 백엔 드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리
Redux-actions
액션 생성 함수를 더 짧은 코드로 작성할 수 있게 해준다.
리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용할 수 있게 해준다.
참고 링크
import { createActions, handleActions, combineActions } from 'redux-actions';
const defaultState = { counter: 10 };
const { increment, decrement } = createActions({
INCREMENT: (amount = 1) => ({ amount }),
DECREMENT: (amount = 1) => ({ amount: -amount })
});
const reducer = handleActions(
{
[combineActions(increment, decrement)]: (
state,
{ payload: { amount } }
) => {
return { ...state, counter: state.counter + amount };
}
},
defaultState
);
export default reducer;Immer
불변성을 유지하는 코드를 쉽게 작성할 수 있도록 도와주는 라이브러리.
얘가 필요한 이유는 Redux의 중요한 3가지 규칙때문인데,
1. 하나의 애플리케이션 안에는 하나의 스토어.
2. 상태는 읽기전용.
3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.
여기서 2번 때문이다.
데이터의 변경을 감지하기 위해서는 내부 데이터까지 전부 찾아봐야 하는데 이 경우 시간이 너무 오래 걸린다.
따라서 기존의 상태를 수정하지 않고 새로운 상태를 생성하여 업데이트한다. 이를 통해 불변성을 유지할 수 있다.
따라서 기존 상태의 객체를 새로운 객체로 변경하면 객체의 주소가 다르므로 얕은 비교를 통해 변경을 쉽게 확인.
...(spread 연산자)를 사용해 기존의 상태값을 복사해서 새로운 객체에 넣어주는 방식으로 상태값을 바꿔주는데 복잡한 구조에서는 까다롭기 때문에 immer 사용하여 불변성 유지.
