#30 각성해서 새롭게 태어나자!
✅ 리덕스(Redux) 파헤치기!
리덕스는 리액트 생태계에서 사용률이 가장 높은 상태 관리 라이브러리이다.
리덕스를 사용하면 여러 컴포넌트의 상태를 글로벌하게 관리할 수 있으며...
useState 처럼 컴포넌트 내부에서 state 를 관리하는게 아니라, 컴포넌트 바깥에서 사용할 수 있는 매우 편리한 라이브러리이다!
이전에 배운 Context API 또 한, 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있다.
그러면 둘의 차이점은 무엇일까?
Context API
- 리액트에서 자체적으로 만든 라이브러리
- 코드를 통해서 랜더링을 할지 않할지 선택이 불가능
- Redux 보다 더 많은 코드를 작성해야 한다
- 간단한 앱에서 사용하는 걸 추천!
- 사용하면 컴포넌트를 재사용하기 어렵다
Redux
- 규모가 큰 프로젝트에 쓰기 안성만춤!
- 비동기 작업을 자주 사용할 때 쓰인다
- 연결된 state 가 바뀌었을 때만 컴포넌트를 다시 랜더링한다
- 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수 (매번 Context 를 만드는 번거로움을 덜 수 있다)
- JavaScript 혹은 TypeScript 를 사용할 때, 사용 가능하다!
- 미들웨어(middleware)로 다양한작업(비동기, 로깅) 가능
💌 리덕스 주요 키워드
useReducer 를 접해본 적이 있으면, 개념은 비교적으로 쉽다
1. 액션(Action)
- 액션은 무조건 자바스크립트 객체 형태이다
- type 필드를 필수적으로 가지고 있어야한다
- 상태 변화가 필요할 때, 발생시킨다
기본 형태 )
const PLUS_TODO = 'PLUS_TODO'
{
type: PLUS_TODO,
text: 'Build my first Redux app'
}{
type: "PLUS_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}2. 액션 생성함수 (Action Creator)
액션을 만드는 함수
파라미터를 받은 뒤 액션 객체 형태로 주는 역할
export function plusTodo(data) {
return {
type: "PLUS_TODO",
data
};
}
// 화살표 함수로도 만들 수 있다.
export const changeInput = text => ({
type: "CHANGE_INPUT",
text
});만드는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다. 그리고 함수 앞에 export 키워드를 붙여서, 다른 파일에 불러와 사용한다.
3. 리듀서 (Reducer)
useReducer 와 마찬가지로 reducer 는 변화를 일으키는 함수이다.
두 가지 파라미터를 받아오는데...
function reducer(state, action) {
// 상태 업데이트 로직
return changedState;
}리듀서는 현재 상태와 전달 받는 액션을 참고해서 새로운 상태를 반환한다.
주로 switch 문을 이용해서 reducer 함수를 작성할 수 있다.
예 )
function count(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}useReducer 는 보통 default 부분에 error 발생시키도록 처리하는게 일반적이지만, 리덕스의 reducer 는 state 를 그대로 반환해준다.
4. 스토어 (Store)
액션과 리듀서가 함께하는 곳!
일반적인 스토어 형태
import { createStore } from 'redux'
const store = createStore(reducer)하지만 createStore 는 사용하지 않으므로, redux toolkit 에 있는 configureStore 를 사용하면 된다.
스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.
5. 디스패치 (dispatch)
스토어의 내장함수 중 하나!
쉽게 말해서 디스패치는 액션을 발생시키는 일을 한다.
dispatch 라는 함수에 액션을 파라미터로 전달한다.
-> dispatch(action)
호출을 하면, 스토어는 리듀서 함수를 실행시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고해서 새로운 상태를 만든다.
6. 구독 (subscribe)
또한 스토어의 내장함수 중 하나
subscribe 함수는 형태의 값을 파라미터로 받아온다.
이 함수에 특정 함수를 전달하면, 액션이 디스패치 될 때마다 전달해준 함수가 호출된다.
리액트에서는 이 함수를 쓸 일을 없다.
대신 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용해 리덕스 스토어의 상태에 구독한다.
참고 : 벨로퍼트와 함께하는 모던 리액트
