Chapter2. Redux
Redux란?
:전역 상태를 관리할 수 있는 저장소인 Store를 제공하여 데이터(props) 흐름을 단순하게 해주고, Props Drilling과 같은 문제를 해결해주는 상태 관리 라이브러리
React와 Redux의 비교
- React에서 위와 같은 구조의 애플리케이션이 있을때, 컴포넌트3, 컴포넌트6에서만 사용되는 상태가 있다고 치면, React의 데이터 흐름에 따라 상태를 최상위 컴포넌트에 위치시키는 것이 적절함.
=> But! 비효율적인 단점들이 있음- 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐
- 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함
- 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐
- 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음
- 위의 React 애플리케이션과 똑같은 구조를 Redux를 사용하면 전역 상태를 관리할 수 있는 저장소인 Store를 제공하여 데이터 흐름이 깔끔해져 위의 문제들을 해결해줌
Redux의 구조
Redux에서는 데이터가 단방향으로 흐름
Action => Dispatch => Reducer => Store
Redux가 상태를 관리하는 순서
- 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성
- 이 Action 객체는 Dispatch 함수의 인자로 전달
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달
- Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
- 상태가 변경되면, React는 화면을 다시 렌더링 합니다.
1. Store
: 상태(state)를 저장하고 관리하는 오직 하나뿐인 저장소
- Provider 컴포넌트를 사용해 store를 손쉽게 사용가능
- 전역 상태 저장소 store를 사용하려면, store를 사용할 컴포넌트를 감싸준 후 props로 변수 store를 전달해줘야 함.
import { Provider } from 'react-redux;
//생략
<Provider store={store}>
<App />
</Provider>- createStore() 메서드를 활용해 Reducer를 연결해서 Store를 생성
import { createStore } from 'redux';
const store = createStore(reducer);2. Reducer
: Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수
- Reducer를 생성할 때에는 초기 상태를 인자로 요구
- Reducer는 순수함수여야 함! 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문에
const count = 1
//첫번째 인자: 기존 state , 두번째 인자: action객체
//첫번째 인자에 default value를 설정해주지 않으면 undefined가 할당되어 오류발생 가능
// ex. const count = 1
const counterReducer = (state = count, action) => {
// Action 객체의 type 값에 따라 분기하는 switch 조건문
// action 객체에서 정의한 type에 따라 새로운 state를 리턴
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;
}
} - combineReducers() 메서드를 사용해 하나의 Reducer로 합쳐줄 수 있음 (여러 개의 Reducer를 사용하는 경우)
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});3. Action
: 어떤 액션을 취할 것인지(어떻게 state를 변경할지) 정의해 놓은 객체
- Dispatch 함수를 통해 Reducer 함수 두번째 인자로 전달됨
- type은 필수로 지정을 해줘야 함(해당 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문)
- type은 대문자와 Snake Case로 작성 (ex: SET_NUMBER)
- 필요에 따라 payload 를 작성해 구체적인 값을 전달
// payload가 필요 없는 경우
{ type: 'INCREASE' }
// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }Action Creator(액션 생성자)
: 보통 Action을 직접 작성하기보다 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많음
// payload가 필요 없는 경우
const increase = () => {
return {
type: 'INCREASE'
}
}
// payload가 필요한 경우
const setNumber = (num) => {
return {
type: 'SET_NUMBER',
payload: num
}
}4. Dispatch
: Reducer로 Action을 전달해주는 함수. Dispatch의 전달인자로 Action 객체가 전달
- Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출함
// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );
// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );Redux Hooks
: React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공
useSelector()
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()
: 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)// state : Store에 저장된 모든 state
console.log(counter) // 1Redux의 세 가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙임
2. State is read-only
상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙.
3. Changes are made with pure functions
변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙.
참고하면 좋은 문서: Redux 공식문서 / React-Redux 공식문서
