본 필자는 스마일게이트 데브 캠프 2기에 활동중이다.
필자는 Lemonade 팀 프론트엔드 개발을 담당하며,
하단에 나오는 종현이는 NCNS 팀 프론트엔드를 담당중이다.
종현이 깃헙주소를 첨부해놓겠다!
userInfo
를 Redux
를 통해 관리할 예정.md
문법에 익숙해지고 싶다.Recoil
만 사용할 줄 알고 Redux
에 대해서 심한 거부감이 있음. 하지만 언젠가 꼭 알아야하는 것으로 생각중.이 기회에
Redux
를 공부해보고, 내용을 정리해보자.
combineReducer
로 하나로 묶어 짱 큰 왕 Reducer
를 만들어 store
를 생성할때 연결시켜준다.import { createStore, combineReducers } from 'redux'
import addsubReducer from './reducers/addsub'
import countingReducer from './reducers/counting'
const rootReducer = combineReducers({
value: addsubReducer,
count: countingReducer
})
const store = createStore(rootReducer)
export default store
export const SET_USERNAME = 'SET_USERNAME'
export const SET_DARK_MODE = 'SET_DARK_MODE'
export const SET_CURRENT_VIDEO = 'SET_CURRENT_VIDEO'
export const setUsername = (name) => ({
type: SET_USERNAME,
name,
})
export const setDarkMode = (value) => ({
type: SET_DARK_MODE,
value,
})
export const setCurrentVideo = (video) => ({
type: SET_CURRENT_VIDEO,
video,
})
간단하게 아래 4단계를 거친다.
단방향 데이터 흐름 패턴인 Flux 패턴 구조에 대한 이해
- Action -> Dispatcher -> Store -> View
Redux 매커니즘에 대한 이해
- Store는 createStore(CombineReducer)를 통해 생성된다.
- Store의 내장함수 dispatch(actionCreateFunc)를 통해 dispatch가 발생한다.
- actionCreateFunc는 실제 수행할 action(통상 Type이 담긴 객체 형식)을 반환한다.
- action Type을 통해 수행할 로직을 reducer 함수에서 실행한다.
- reducer 함수가 반환하는 바뀔 상태 값은 immutable한 객체이며, store의 상태 값이 변한다.
- subscribe 하고 있는 곳의 상태 값들이 전부 변한다.
종현 : Redux middleware에 대한 조사 및 R&D
석기 : Redux에 대한 개념 복습과 react-redux에 대한 조사 및 R&D