React를 공부하면서 Redux에 관한 얘기를 많이 들었다.
개인적인 공부목적으로 프로젝트를 만들어보거나 간단하게 쓸 경우에는 필요성을 느끼지 못해서
많이 들어봤어도 공부해보지 않았다.
Redux란 상태관리를 위한 라이브러리이다. 이러한 상태관리 라이브러리는 Redux외에도 대표적으로
Mobx나 React 16.3버전 이후에 생긴 Context api 등이 있다.
이미지 출처 : 생활코딩님 강의
위의 이미지를 보면 Redux의 전체적인 흐름을 보여준다.
Redux의 기본적이고 중요한 개념 3가지
(Store, Reducer, Action)
Store
Store는 정보들의 저장소이다. 이 Store에 들어있는 State는 dispatch와 subscribe, getState를 통해서 접근이 가능하며 직접적으로 접근이 불가능하다.
생활코딩님의 강의를 인용하면 State라는 은행장부는 손님이 함부로 접근할 수 없다.
action이라는 값을 dispatch라는 은행청구원을 통해 전달하고 이를 reducer라는 기능이 장부에 기록을 하여 state라는 값을 바꿔준다고 이해했다.
store는 오직 하나만 존재하며, 주로 미들웨어를 설정하는 일을 한다.
비동기통신을 사용하기 위해 redux-thunk를 설정하거나, state 변경내역을 관리하기 위해 react-router-redux를 추가하거나, 디버깅을 위해 react-devtool을 설정하는 등의 일을 한다.
Store의 생성은 CreateStore()를 통해서 생성할 수 있다.
Reducer
Reducer는 Action메소드에서 객체값을 받아 기존의 상태를 새로운 상태로 변경하는 일을 한다.
기본적으로 State와 action값을 받도록 약속되어 있다.
Reducer는 입력받는 state와 반환하는 state가 항상 같은 순수함수로 구현되어 있다.
//ex)
function reducer(state, action) {
var newState;
if(action.type === 'CHANGE_COLOR') {
newState = Object.assign( { }, state, { color : action.color })
}
return newState;
}★★ Object.assign( { }, state, { color : action.color } );
// Object.assign의 첫번째 인자는 무조건 빈 객체이어야 하며, Object.assign를 사용하는 이유는 state의 원본을 바꾸지 않고 인자를 복사해서 사용해야 후에 Redux의 기능사용에 지장이 없다.
Action
type과 payload라는 값을 가진 객체이다. 이 Action이라는 객체가 다른 메소드를 통해서 Store에 전달되어 값을 변경할 수 있다.
ex){type : 'create', payload:{title:title, desc:desc}}
기본 개념 3가지 외에 중요한 메소드
dispatch
- 리듀서를 호출해서 state값을 바꾼다.
store.dispatch({type : 'CHANGE_COLOR' , color : 'red'}); // dispatch에 Action객체를 전달해서 reducer 호출.subscribe
- State값이 바뀔때마다 render함수를 호출해 화면을 갱신한다.
store.subscribe(red);getState
- store에 저장된 State값을 가져온다.
store.getState()// 추가로 적음
