Redux
⇒ 애플리케이션에서 정교한 상태관리를 구현하는 데 도움이 되는 라이브러리 중 하나.
Redux 쓰는 이유
- 모든 컴포넌트가 props 없이 state 직접 꺼낼 수 있다.
- 상태 관리에 용이하다. ⇒ state를 어떻게 수정하는지 한 곳(store)에서 관리가 가능.
- state 수정하는 방법 : reducer
- compoenet 에서 state 수정 요청하려면 : dispatch 쓴다.
Redux의 구조
<Redux의 상태관리 순서>
- 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
- 이 Action 객체는 Dispatch 함수의 인자로 전달된다.
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
- Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역상태 저장소 Store의 상태를 변경한다.
- 상태가 변경되면 React는 화면을 다시 렌더링 한다.
💦 즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.
💦 Action 객체가 dispatch() 메서드에 전달 ⇒ dispatch(Action)를 통해 Reducer를 호출 ⇒ Reducer는 새로운 store를 생성
Store
상태가 관리되는 오직 하나뿐인 저장소의 역할을 한다.
Redux 앱의 state가 저장되어 있는 공간.
- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
import { createStore } from 'redux';
const store = createStore(rootReducer);createStore 메서드를 활용해 Reduser를 연결해서 Store를 생성.
Reducer
Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수
(변화를 일으키는 함수)
이 때, Reducer는 순수함수여야 한다.
⇒ 외부요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문.
⇒ 입력이 동일하게 유지되면 항상 동일한 출력을 생성한다.
액션을 만들어서 발생시키면 리듀서가 현재상태와 전달받은 액션객체를 파라미터로 받아온다.
그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 준다.
리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다.
⇒ 이 작업을 할 때, spread 연산자( … ) 를 사용하면 편하다.
- Action을 Store에 바로 전달하는 것이 아니다.
- Action을 Reducer에 전달해야 한다.
- Reducer가 주문을 보고 Store의 상태를 업데이트하는 것이다.
- Action을 Reducer에 전달하기 위해서는 dipaatch() 메서드를 사용해야 한다.
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});만약 여러 개의 Reducer를 사용하는 경우, Recux의
combineReducers메서드를 사용해서 하나의 Reducer 로 합쳐출 수 있다.
Action
어떤 액션을 취할 것인지 정의해 놓은 객체
- 앱에서 스토어에 운반할 데이터를 말한다.(주문서)
- 자바스크립트 객체 형식으로 되어있다.
// payload가 필요 없는 경우
{ type: 'INCREASE' }
// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }type은 필수로 지정을 해주어야 한다. 해당 Action 객체가 어떤 동작을 하는지 명시해주는역할을 하기 때문이며, 대문자와 Snake Case로 작성한다. 여기에 필요에 따라 payload를 작성해 구체적인 값을 전달한다.
// payload가 필요 없는 경우
const increase = () => {
return {
type: 'INCREASE'
}
}
// payload가 필요한 경우
const setNumber = (num) => {
return {
type: 'SET_NUMBER',
payload: num
}
}어떤 변화를 일으켜야할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 도 있다. 이러한 일을 방지하기 위해서 이를 함수로 만들어서 관리한다. ⇒ 보통 Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다. 이러한 함수를 액션 생성자(Action Creator)라고도 한다.
Dispatch
Reducer로 Action을 전달해주는 함수
dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.
이 함수가 호출되면 store는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.
// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );
// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출한다.
Redux Hooks
React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다.
- useDispatch() Action 객체를 Reducer로 전달해주는 Dispatch 함수를 반환하는 메서드.
import { useDispatch } from 'react-redux' const dispatch = useDispatch() dispatch( increase() ) console.log(counter) // 2 dispatch( setNumber(5) ) console.log(counter) // 5
- **useSelector()** 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다. import { useSelector } from 'react-redux' const counter = useSelector(state => state) console.log(counter) // 1
Redux의 세 가지 원칙
-
**Single source of truth(단일 스토어)**
⇒ 동일한 데이터는 항상 같은 곳에서 가지고 와햐 한다는 의미. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙.
-
**State is read-only(읽기 전용 상태)**
⇒ 상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼 Redux의 상태도 직접 변경할 수 없음을 의미. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙.
-
**Changes are made with pure functions(순수함수)**
⇒ 변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙.
참고
코드스테이츠
https://hanamon.kr/redux란-리덕스-상태-관리-라이브러리/
https://itprogramming119.tistory.com/entry/React-리덕스-총정리-및-예제
