👉 이 글은 리액트를 다루는 기술을 읽고 작성된 글 입니다.
Redux는 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이다. MobX, recoil 등등 여러 상태 관리 라이브러리가 있지만, 일단 채용 공고를 볼 때에 제일 많이 보이는 Redux에 대해 공부하며 이후 프로젝트에 적용을 해 볼 예정이다.
리덕스 개념 정리
리덕스에 대해 깊은 공부를 하기 전에, 리덕스를 공부할 때 알아두어야 할 몇가지 키워드에 대해 먼저 알아보자.
액션 Action
상태에 변화가 필요하면 액션(Action)이 발생한다. 이는 하나의 객체로 표현되는데 다음과 같다.
{
type: 'TOGGLE_VALUE'
}액션 객체는 type 필드를 반드시 가지고 있어야 한다. type의 값이 액션의 이름이기 때문이다. 그리고 그 외의 값들은 나중에 State를 업데이트 할 때 참고해야 할 값이며, 내 마음대로 값을 넣을 수 있다.
{
type: 'ADD_TODO',
data: {
id: 1,
text: '리덕스 배우기'
}
{
type: 'CHANGE_INPUT',
text: '안녕'
}액션 생성 함수 action creator
액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수다.
function addTodo(data) {
return {
type: 'ADD_TODO',
data
}
}
// arrow function으로도 만들 수 있다.
const changeInput = text => ({
type: 'CHANGE_INPUT',
text
)};상태 변화를 일으커야 할 때마다 액션 객체를 만들어야 하는데, 매번 액션 객체를 만드는 것은 굉장히 번거로운 작업이고, 실수할 수도 있다. 그렇기에 함수로 만들어서 관리하자.
리듀서 Reducer
리듀서(Reducer)는 변화를 일으키는 함수다.
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환한다. 리듀서는 다음과 같은 형태이다.
const initialState = {
counter: 1
}
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1
}
default:
return state;
}
}스토어 Store
프로젝트에 리덕스를 적용하기 위해 스토어를 적용시킨다. 프로젝트에는 하나의 스토어만 가질 수 있으며, 현재 애플리케이션 상태와 리듀서, 내장 함수들을 가지고 있다.
디스패치 Dispatch
디스패치(dispatch)는 스토어의 내장 함수 중 하나다. 액션을 발생시키는 장치로 이해하면 된다. 이 함수는 dispatch(action) 형태로 액션 객체를 파라미터로 넣어 호출한다.
디스패치가 호출되면, 스토어는 리듀서를 실행시켜 새로운 상태를 만든다.
구독 subscribe
구독(subscribe)도 디스패치처럼 스토어의 내장 함수 중 하나다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어 호출하면, 이 리스너 함수가 액션이 디스패치 되어 상태가 업데이트 될 때마다 호출된다.
const listener = () => {
console.log('상태가 업데이트 됨');
}
const unsubscribe = store.subscribe(listener);
unsubscribe(); // 추후 구독을 비활성화할 때 함수 호출구독 개념은 내가 ios를 공부하며 MVVM 패턴을 공부할 때도 이해가 잘 되지 않았던 부분이다. JS의 Promise나 Redux의 subscribe를 이해하는데 꽤 고생했다. 뭔가 한 번에 와닿지 않는 기분이 든다. 이걸 적용하려면 어떻게 해야하지? 라는 생각이 든다. 좀 더 공부하며 여러 코드에 적용시켜봐야 제대로 이해할 수 있을 것만 같다.
리덕스의 세 가지 규칙
리덕스는 다음 세 가지 규칙을 지켜야 한다.
1. 단일 스토어
하나의 애플리케이션 안에는 하나의 스토어가 있다. 여러 개의 스토어를 사용할 수는 있지만, 상태 관리가 너무 복잡해진다.
그렇기에 하나만 사용하자.
2. 읽기 전용 상태
리덕스 상태는 읽기 전용(
Read Only) 이다. 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다.
리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문이다.
즉, 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능 유지를 할 수 있다.
3. 리듀서는 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 한다.
순수한 함수는 다음 조건을 만족한다.
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
- 파라미터 외의 값에는 의존하면 안된다.
- 이전 상태는 절대 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과를 반환해야 한다.
⛔️ 리듀서를 작성할 때는 위의 4가지 사항을 주의해야 한다.
예를 들어, 리듀서 함수 내부에서 랜덤 값을 만들거나, Date 함수를 사용하여 현재 시간을 가져오거나, 네트워크 요청을 한다면, 파라미터가 같아도 다른 결과를 만들 수 있기에 사용하면 안된다. 이런 작업들은 리듀서 밖에서 처리해야 한다.
- 액션을 만드는 과정에서 처리해도 되고,
- 리덕스 미들웨어에서 처리해도 된다.
주로 네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리한다.
