TIL - Redux란?
1. Redux란?
우리가 저번시간에 React로 구현했던 비디오 플레이어이다. Entry를 클릭했을 때 VideoPlayer의 상태를 변화시켜주기 위해 App에 상태관리 함수를 작성하고 상태 관리 함수를 props로 자식 컴포넌트에게 전달해주어 사용했다.
그러나 이런 방식으로는 프로젝트의 규모가 커질수록 props의 통로 역할을 하는 자식 컴포넌트의 갯수가 많아질 것이고, 이에 따라 상태 관리를 하는 것이 점점 더 복잡해 질 것이다. 이러한 문제를 해결하기 위해 나온 상태 관리 라이브러리 중 하나가 Redux이다. 모든 컴포넌트가 접근할 수 있는 전역 상태를 담고 있는 store가 있고, state가 필요한 컴포넌트가 다이렉트로 접근할 수 있는 방법이다.
이를 flux pattern이라고 한다.
(1) action
action 객체는 type과 data를 가지고 있다. 이 객체는 dispatcher에게 전달되고, 그 동작의 결과로 새로운 state가 반환이 된다.
{ type: "ORDER" //type drink: { //data menu: "Americano" size: "Grande" iced: false } }
(2) dispatcher
flux의 모든 데이터 흐름을 관리하는 허브 역할을 한다. action 객체는Dispatcher에게 전달되고 Dispatcher는 store를 호출한다.
dispatch(ORDER)
(3) store
상태가 관리되는 오직 하나의 공간이다. 컴포넌트와 별개로 store 라는 공간이 있어서 각각의 컴포넌트들이 state 정보가 필요할 때 store에 접근해서 사용할 수 있다.
const 저장소 = createStore( rootReducer )
(4) reducer
state와 action을 받아서 새로운 state를 생성한다.
const reducer = (initialState, action) => { ~~~~~~ ~~~~ }
2. Redux의 3가지 원칙
(1) Single source of truth
데이터는 store 라는 곳에 저장되어 있다.
(2) state is read-only
action 이라는 객체를 이용해서만 state를 변경시킬 수 있다.
(3) change are made with pure functions
변화는 순수함수에서만 이루어진다. 이 때 순수함수는 리듀서이다.
이번시간에는 리덕스에 대해 공부했다.
다음시간에는 리덕스를 이용해 Cmarket을 구현해본다.
오늘은 여기까지 :)
