본 필자는 스마일게이트 데브 캠프 2기에 활동중이다.

필자는 Lemonade 팀 프론트엔드 개발을 담당하며,
하단에 나오는 종현이는 NCNS 팀 프론트엔드를 담당중이다.

종현이 깃헙주소를 첨부해놓겠다!

---

스마게 사이드 스터디

1회차 스터디를 진행하며 판서한 내용이다! 회의실이 매우 더웠다.

스터디를 하게 된 계기

1. 코드 리뷰를 받고 싶다.
   이유) 각자 팀에서 혼자 프론트엔드를 맡고 있어 작성하는 코드에 대해서 리뷰가 필요하다.
   • But, 프로젝트 주제도 다르고, 무엇보다 기술 스택이 달라 어렵겠다고 판단.
2. 공통적으로 모르는 영역을 같이 공부하고 싶다.
   • 종현) 현재 로그인한 userInfo 를 Redux를 통해 관리할 예정.
     • 하지만 사용법을 얕게만 알고 있다.
     • Redux Saga에 대해서는 지식이 필요하다.
     • 글쓰기를 통해 md 문법에 익숙해지고 싶다.
   • 석기) 러닝커브가 쉬운 Recoil 만 사용할 줄 알고 Redux 에 대해서 심한 거부감이 있음. 하지만 언젠가 꼭 알아야하는 것으로 생각중.

이 기회에 Redux 를 공부해보고, 내용을 정리해보자.

---

---

---

석기 & 종현

Redux의 구성요소

1. Store

• Store는 단 하나만 존재한다.
• Store에 전역 상태 그 자체를 저장해 관리한다.
• Store를 생성할때, reducer를 등록한다.

2. Reducer

• Reducer를 통해 Store에 새로운 값을 저장한다.
• Reducer는 여러가지가 존재 할 수 있다.
  • ex) counter 관련 reducer, 유저정보 관리하는 reducer...
  • 여러가지 reducer를 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

3. Action

• Reducer가 Store에 새로운 값을 넣을때 참조하는 친구.
• 즉, 어떤 이벤트로 Action이 발생하고 이를 참고해 Reducer가 새로운 state값을 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,
})

Redux 흐름

간단하게 아래 4단계를 거친다.

1. 이벤트 발생 (사용자 클릭)
2. Action 발생
3. Action 을 Reducer에게 전달
4. Reducer를 통해 Store에 새로운 상태 저장.

---

---

---

얻은점

단방향 데이터 흐름 패턴인 Flux 패턴 구조에 대한 이해

• Action -> Dispatcher -> Store -> View

Redux 매커니즘에 대한 이해

• Store는 createStore(CombineReducer)를 통해 생성된다.
• Store의 내장함수 dispatch(actionCreateFunc)를 통해 dispatch가 발생한다.
• actionCreateFunc는 실제 수행할 action(통상 Type이 담긴 객체 형식)을 반환한다.
• action Type을 통해 수행할 로직을 reducer 함수에서 실행한다.
• reducer 함수가 반환하는 바뀔 상태 값은 immutable한 객체이며, store의 상태 값이 변한다.
• subscribe 하고 있는 곳의 상태 값들이 전부 변한다.

---

---

---

To-Do

종현 : Redux middleware에 대한 조사 및 R&D
석기 : Redux에 대한 개념 복습과 react-redux에 대한 조사 및 R&D