이번 글에서는 Redux에 대해 공부한 점을 정리하려합니다.
Redux란 무엇인가?
Redux는 Javascript app(Angular, React 등)을 위한 예측 가능한 state container이다.
Redux는 왜 쓰는것일까?
기존 React에서 데이터 바인딩을 위해 state를 사용하는데 상위 컴포넌트에서 하위컴포넌트로 state를 가져다 쓸 때 props문법을 통해 사용했으나 개발 과정 중 규모가 커져서 컴포넌트가 많아질 경우 props를 여러번 반복해서 사용해야하는 단점이 있었다. 하지만 Redux를 사용하면 props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있도록 도와준다.
간단히 말해서 어느 위치에 있든 상관 없이 state를 가져다 쓸 수 있다는 것이다.
다음으로는 Redux에서 자주 사용하는 용어에 대해 알아보자.
Action (액션)
Action은 state에 변화가 필요할 때 이 액션을 발생시키며 이는 하나의 객체이다.
Action은 type필드를 가지고 있으며 그 외의 값은 상황에 따라 추가할 수 있다.
// action 1
{
type: "NUMBER_COUNT"
},
// action 2
{
type: "INPUT"
text: "Hello"
}Action Creator (액션 생성 함수)
Action이 변화에 의해 발생된 객체라면 Action Creator는 이 Action을 만들어 객체로 만들어주는 함수이다.
const numberCount = (data) => {
return {
type: "NUMBER_COUNT",
number: data
}
}Reudcer (리듀서)
Reducer는 현재 state(initialState)와 액션 개체를 받아 필요하다면 새로운 상태를 리턴하는 함수이다.
const initialState = {
id: 0,
name: 'hyun',
age: '28'
...
}
function reducer(state, action) {
switch(action.type) {
case 'NUMBER_COUNT':
return state +1;
case 'INPUT':
return state;
default:
return state;
}
}reducer 함수의 첫번째 인자 state는 initialState와 동일하고 두번째 인자 action은 위쪽에서 설정한 Action과 같다고 보면 된다.
그리고 switch문(if문을 사용해도 가능하다)을 사용하여 해당하는 action의 타입마다 새로운 값을 리턴한다.
Store (스토어)
store는 현재 앱의 state와 reducer함수, 몇가지의 내장 함수가 들어있고 딕셔너리 혹은 json처럼 생겼다.
Dispatch (디스패치)
dispatch는 store의 내장함수 중 하나로 action을 발생시키는 역할을 한다.
다음으로는 Redux의 3가지 규칙에 대해 알아보자
- 하나의 어플리케이션은 하나의 스토어만 가진다.
디버깅이 쉬워지며 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.
- State(상태)는 읽기 전용이여한다.
이유는 불변성을 유지해야하기 때문이다. 따라서 상태를 변경시키려면 concat이나 speard문법을 통해 상태를 교체하는 식으로 변경시켜야한다.
- Reducer는 순수한 함수이여야 한다.
순수한 함수는 다음과 같은 조건을 만족한다.
Reducer 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
파라미터 외의 값에는 의존하면 안된다.
이전 상태는 바뀌어선 안되고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수이다.
이렇게 보면 어디서든 state를 가져다 쓸수있다는거 치곤 꽤나 복잡할 수 있다.
그래서 이러한 복잡한 Redux를 위해 Redux toolkit이 새로 나왔다.
또한 redux-actions와 immer란 패키지도 있으며 코드 구조를 조금 더 짧고 가독성 좋게 도와준다.
+리덕스 비동기를 지원하는 redux thunk와 redux saga와 같은 미들웨어도 있다.
Redux의 대체품으로는 mobx, recoil등이 있으며 추후에 다뤄 볼 예정이다.
