Redux는 컴포넌트에서 상태를 분리하여 따로 관리할 수 있게해주는 상태 관리 라이브러리이다. 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수 있게된다.
Redux의 상태관리 메커니즘
1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
5. 상태가 변경되면, React는 화면을 다시 렌더링 한다.
Store
Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 한다.
import {Provider} from 'react-redux'
import {legacy_createStore as createStore) from 'redux'여기서 Provider는 store를 손쉽게 사용할 수 있게 해주는 컴포넌트이다. 해당 컴포넌트를 불러온 다음, Store를 사용할 컴포넌트를 감싸준 후 Provider 컴포넌트의 props로 store를 설정해주면 된다.
<Provider store={store}>
<App />
</Provider>
Reducer
Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수이다.
const count = 1
// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {
// Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
switch (action.type) {
//action === 'INCREASE'일 경우
case 'INCREASE':
return state + 1
// action === 'DECREASE'일 경우
case 'DECREASE':
return state - 1
// action === 'SET_NUMBER'일 경우
case 'SET_NUMBER':
return action.payload
// 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
default:
return state;
}
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.이 때, Reducer는 반드시 순수함수여야 한다.
만약 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용하여 하나의 Reducer로 합쳐줄 수 있다.
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});
Action
Action은 말 그대로 어떤 액션을 취할 것인지 정의해놓은 객체이다. 보통 Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다. 이러한 함수를 액션 생성자(Action Creator)라고 한다.
// payload가 필요 없는 경우, 다른 파일에도 사용하려면 앞에 export를 붙혀주자.
const increase = () => {
return {
type: 'INCREASE'
}
}
// payload가 필요한 경우
const setNumber = (num) => {
return {
type: 'SET_NUMBER',
payload: num
}
}
Dispatch
Dispatch는 Redecer로 Action을 전달해주는 함수이다. Dispatch의 전달인자로 Action 객체가 전달된다.
// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );
// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출한다.
Redux Hooks
여기까지 Store, Reducer, Action, Dispatch 개념들을 코드로 구성하였고, 이 개념들을 연결시켜주는 역할을 하는 것이 바로 Redux Hooks이다. useSelector(), useDispatch() 이 두가지 메서드가 자주 쓰인다.
useDispatch()
useDispatch()는 Action 객체를 Reducer로 전달해주는 Dispatch 함수를 반환하는 메서드이다.
import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2
dispatch( setNumber(5) )
console.log(counter) // 5useSelector()
useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있께 해주는 메서드이다.
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1
Redux의 세 가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 와야한다는 의미이다. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나의 공간이 있다는 것과 연결된다.
2. State is read-only
React에서 상태갱신함수로만 상태를 변경할 수 있었던 것 처럼, Redux의 상태도 직접 변경할 수 없음을 의미한다. 즉, Action 객체가 있어야만 상태를 변경할 수 있다는 것과 연결된다.
3. Changes are made with pure functions
상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로만 작성되어야 하는 Reducer와 연결된다.
댓글