Redux: 컴포넌트와 상태를 분리해 전역에서 상태 관리를 해줄 수 있게 해주는 상태관리 라이브러리이다.
리덕스는 전역 상태를 관리할 수 있는 저장소 Store를 제공한다.
Redux 작동원리
☻ :
Action➡Dispatch➡Reducer➡Store
𝟙 상태가 변경되어야 하는 이벤트 발생 ->Action객체(변경될 상태에 대한 정보가 담겨있는)가 생성된다.
𝟚 Action 객체가Dispatch함수의 인자로 전달된다.
𝟛 Dispatch함수가 Action객체를Reducer함수로 전달한다.
𝟜 Reducer함수는 Action객체의 값을 확인후 그 값에 따라Store의 상태를 변경한다.
𝟝 상태가 변경되면 React가 리렌더링된다.
리덕스 시작하기
- redux, react-redux 설치가 되어있어야 한다.
- react-redux에서 Provider를 불러온다.
import {Provider} from 'react-redux';
- Provider: store 쉽게 사용할 수 있게 해주는 컴포넌트.
Store 사용할 컴포넌트를<Provider store={store}>로 감싸준다.
props로 store를 설정해야한다.
- redux에서 createStore를 불러온다.
import { legacy_createStore as createStore } from 'redux';
⚠️ 레거시는 뭐지? createStore만 가져오는거랑 뭐가 다른걸까? 알아보자 - store를 사용하기 위해서는 store를 props로 전달해주어야한다.
store에 createStore메서드를 이용해 store만들고 인자로 Reducer 함수를 전달한다.
const store = createStore(reducer);
Store :: 상태가 관리되는 저장소
Store는 한개밖에 없다.
1. 스토어를 생성하는 메서드를 임포트해서 가져오고
2. 스토어를 생성해 변수에 할당한다.
import {createStore} from 'redux';
const store = createStore(rootReducer);Reducer :: dispatch가 전달해준 Action 객체의 type값에 따라 상태를 변경함
reducer는 순수함수여야 한다. 외부요인에 간섭을 받으면 안됨!!
리듀서 함수 첫번째 인자로는 기존 state가 들어온다. 첫번째 인자에는 default value를 설정해주어야 오류가 발생하지 않는다. 두번째 인자에는 action 객체가 들어온다.
- reducer 함수를 작성한다.
- 작성된 reducer 함수를 createStore에 넣어준다.
여러개의 리듀서를 사용하는 경우 combineReducers 메서드를 사용해 하나의 리듀서로 합쳐줄 수도 있다!
import { combineReducers } from 'redux'; rootReducer = combineReducers({ todos: todoReducer, counter: counterReducer}) //리듀서를 넘길 때 키를 사용할 수 있다. //combineReducers({ counter, todos })로 호출 ssap가능
Action :: 어떤 액션을 취할건지 정의해놓은 객체
Action : { type, payload [error, meta] }로 구성됨.
payload가 필요한 경우/아닌경우로 나뉘어져있다.
type은 필수로 지정되어야한다. action을 직접 작성하기보다 action 객체를 생성하는 함수를 만들어 사용하는 경우가 더 많다. 이런 함수를 액션생성자(Action creator)라 한다.
액션은 상태의 변경을 어떤식으로 할지 나타낸다. 스토어에 저장되어있는 데이터를 꺼내오는 유일한 방법이 액션임. 액션을 통해 디스패치 해야 데이터를 불러올수있다.
페이로드란?
리듀서에서 전달된 매개변수가 페이로드로 기록된다.
일반적으로 사용에 있어서 전송되는 데이터를 뜻한다.근본적인 목적이 되는 데이터의 일부분으로 헤더나 메타데이터를 제외한 데이터
- Action creator 함수 작성
- export하여 다른 파일에서도 사용할수 있게 하기
const increate =
() => { return { type: 'INCREASE' }}
const setNum = (num) => { return { type: 'SET_NUM', payload: num}}Dispatch :: Reducer로 Action 전달하는 함수
Dispatch의 전달인자로 Action 객체가 전달된다.
//action 객체 직접 작성
dispatch({type: 'INCREASE'})
//action creator 전달
dispatch({ increase() })Redux Hooks
useDispatch() :: Dispatch함수를 반환한다.
useSelector() :: 컴포넌트와 state를 연결해 리덕스의 state에 접근
import { useDispatch, useSelector } from 'react-redux';
function App() {
const dispatch = useDispatch();
const state = useSelector(state => state)
const plus = () => { dispatch(increase()) }
return <div>
<button onClick={plus}/>
</div>
}한 파일에 모두 때려넣지 않고 Action, Reducer, Store를 각각 분리해서 관리하는 것이 좋다.
Redux 원칙
Single source for truth
State is read-only
Changes are made with pure functions
Flux 디자인패턴
MVC
☻ : Controller → Model ↔ View
기존에는 MVC패턴을 사용하고 있었는데, 모델 뷰 컨트롤러 이렇게 비즈니스로직과 데이터로직을 분리한 디자인패턴이다. 모델에 데이터를 정의하고 컨트롤러를 이용해 모델 데이터를 CRUD하고 변경된 데이터를 view에 출력한다.
모델과 뷰가 양방향으로 데이터를 주고받는다. 때문에 모델이 늘어날수록 복잡도가 늘기때문에 예상하지 못한 문제가 발생할 수 있다.
Model
Flux
☻ : Action ➡ Dispatcher ➡ Model ➡ View
그래서 페이스북에서 이 문제를 해결하기 위해서 플럭스라는 패턴을 만든 것이다. 플럭스에서는 모델과 뷰 사이에 양방향 소통이 되지 않도록 한다. 데이터가 모델에서 뷰로 단방향으로 흐른다.
플럭스 디자인패턴을 적용한 패키지가 리덕스이다.
!그러나 Flux = Redux는 아니다. 여러 개념이 적절하게 짬뽕되었다.
