![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/rWbcWmkm6N-fZCIipaQDq) # Redux 직접 만들기 ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Flux Architecture](#flux-architecture) - [Redux](#redux) - [Redux 직접 만들기](#reduxbr-직접-만들기) - [Connect React & Redux](#connectbr-react--redux) --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/rWbcWmkm6N-fZCIipaQDq) # Flux Architecture --- ## Flux Architecture # An application architecture for React utilizing a unidirectional data flow. --- # Flux Architecture
([https://github.com/facebookarchive/flux](https://github.com/facebookarchive/flux)) > **단방향 데이터 흐름**을 활용한 리액트용 애플리케이션 **아키텍처** - Flux는 우리가 곧바로 사용할 수 있는 프레임워크라기 보다는 패턴에 가까움 - 데이터의 흐름을 정의한 하나의 방법 --- ![bg 90%](https://cdn.frontoverflow.com/document/first-met-redux/images/chapter_01/flux_architecture.jpg) --- ![bg 80%](https://cdn.frontoverflow.com/document/first-met-redux/images/chapter_01/flux_data_flow.jpg) --- # Flux와 Redux의 관계 > "Redux implements Flux" ### Redux는 Flux라는 Architecture를 실제로 구현한 구현체 --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/rWbcWmkm6N-fZCIipaQDq) # Redux --- # Redux - Flux 아키텍처를 실제로 구현한 구현체 - 가장 대표적인 상태관리 라이브러리 --- # Redux의 세 가지 원칙 ([🔗 참고 링크](https://www.frontoverflow.com/document/1/chapter/2/section/6/)) 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions --- # Redux의 구성 요소 ([🔗 참고 링크](https://www.frontoverflow.com/document/1/chapter/3/section/10/)) - **Store**: 데이터들을 저장하기 위한 저장소 - **State**: Store에 저장되어 있는 데이터 - **Action**: Store에 저장된 데이터에 변화를 주기 위한 행동 - **Action Creator**: Action 객체를 생성하는 역할을 하는 JavaScript 함수 - **Reducer**: Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 --- ![bg height:90%](https://cdn.frontoverflow.com/document/first-met-redux/images/chapter_01/redux_data_flow.gif) --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/rWbcWmkm6N-fZCIipaQDq) # Redux
직접 만들기 --- # 프로젝트 생성 ```bash npm create vite@latest my-redux -- --template react ``` --- # 패키지 설치 및 실행 ```bash cd my-redux npm install npm run dev ``` --- ![bg](https://cdn.markslides.ai/users/1/images/zM7x0ofz84FWk7NjAHhBk) --- # 📂 폴더 구성하기 ``` . ├── public └── src ├── assets ├── react-redux │ └── hooks └── redux ├── actions └── reducers ``` --- # Redux로 관리할 **State** 및 **Action** 정의하기 - State - count 값 - Action - count 값을 1 증가시키기 (increment) - count 값을 1 감소시키기 (decrement) --- # Action Types & Action Creators (⌨️ 코드 작성) - **Action Type**: 각각의 Action을 구분하기 위한 고유한 문자열 - **Action**: Store에 저장된 데이터에 변화를 주기 위함 JavaScript 객체 (Action Type을 포함) - **Action Creator**: Action 객체를 생성하는 역할을 하는 JavaScript 함수 `src/redux/actions/counterAction.js` ```jsx // Action Types 작성하기 // Action Creators 작성하기 ``` --- # Action Types & Action Creators (✅ 코드 확인) `src/redux/actions/counterAction.js` ```jsx // Action Types export const ACTION_TYPE_INCREMENT = 'increment'; export const ACTION_TYPE_DECREMENT = 'decrement'; // Action Creators export function incrementActionCreator() { return { type: ACTION_TYPE_INCREMENT, }; } export function decrementActionCreator() { return { type: ACTION_TYPE_DECREMENT, }; } ``` --- # Reducers (⌨️ 코드 작성) - **Reducer**: Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 `src/redux/reducers/counterReducer.js` ```jsx // Action Types import 하는 코드 작성 // 초기 상태 작성 export const initialState = { }; // Reducer 작성하기 function counterReducer(state = initialState, action) { // action이 없는 경우 state 리턴하는 코드 작성 // switch/case문을 이용하여 각 action에 따라 state에 변화주는 코드 작성 } export default counterReducer; ``` --- # Reducers (✅ 코드 확인) `src/redux/reducers/counterReducer.js` ```js import { ACTION_TYPE_INCREMENT, ACTION_TYPE_DECREMENT, } from '../actions/counterAction'; export const initialState = { count: 0, }; function counterReducer(state = initialState, action) { if (!action) { return state; } switch (action.type) { case ACTION_TYPE_INCREMENT: return { ...state, count: state.count + 1, }; case ACTION_TYPE_DECREMENT: return { ...state, count: state.count - 1, }; default: return state; } } export default counterReducer; ``` --- # Redux (`createStore()` 함수) (⌨️ 코드 작성) - **`createStore()`**: Store를 생성하는 함수 `src/redux/redux.js` ```jsx // rootReducer를 파라미터로 받아 export function createStore(rootReducer) { let currentState = rootReducer(); let listenerCount = 0; let listenerMap = {}; return { getState: () => { // 현재 상태를 리턴하는 코드 작성 }, subscribe: (listener) => { // 고유한 listenerId를 생성하는 코드 작성 (listenerCount 값 사용) // listenerMap에 listener를 추가하는 코드 작성 return function unsubscribe() { // listenerMap에서 listener를 제거하는 코드 작성 }; }, dispatch: (action) => { // rootReducer를 사용해서 currentState를 업데이트 하는 코드 작성 currentState = rootReducer(currentState, action); // listenerMap에 등록된 listener들을 실행하는 코드 작성 // action을 리턴하는 코드 작성 }, }; } ``` --- # Redux (`createStore()` 함수) (✅ 코드 확인) `src/redux/redux.js` ```jsx export function createStore(rootReducer) { let currentState = rootReducer(); let listenerCount = 0; let listenerMap = {}; return { getState: () => { return currentState; }, subscribe: (listener) => { const listenerId = listenerCount++; listenerMap[listenerId] = listener; return function unsubscribe() { if (!listenerMap[listenerId]) { return; } delete listenerMap[listenerId]; }; }, dispatch: (action) => { currentState = rootReducer(currentState, action); Object.values(listenerMap).forEach((listener) => { listener(); }); return action; }, }; } ``` --- # Redux (`combineReducers()` 함수) (⌨️ 코드 작성) - **`combineReducers()`**: 여러 개의 Reducer들을 하나로 합친 rootReducer를 생성하는 함수 `src/redux/redux.js` ```jsx export function combineReducers(reducerMap) { const reducerKeys = Object.keys(reducerMap); return function combination(state = {}, action) { let hasChanged = false; const nextState = {}; for (let i = 0; i < reducerKeys.length; i++) { // 각 reducer들을 사용하여 nextState를 만드는 코드 작성 // 현재 state와 다음 state를 비교하여 hasChanged 값을 갱신하는 코드 작성 } // reducerKeys의 길이와 state의 키의 개수를 비교하여 hasChanged 값을 갱신하는 코드 작성 return hasChanged ? nextState : state; }; } ``` --- # Redux (`combineReducers()` 함수) (✅ 코드 확인) `src/redux/redux.js` ```jsx export function combineReducers(reducerMap) { const reducerKeys = Object.keys(reducerMap); return function combination(state = {}, action) { let hasChanged = false; const nextState = {}; for (let i = 0; i < reducerKeys.length; i++) { const key = reducerKeys[i]; const reducer = reducerMap[key]; const prevStateForKey = state[key]; const nextStateForKey = reducer(prevStateForKey, action); nextState[key] = nextStateForKey; hasChanged = hasChanged || nextStateForKey !== prevStateForKey; } hasChanged = hasChanged || reducerKeys.length !== Object.keys(state).length; return hasChanged ? nextState : state; }; } ``` --- # Root Reducer (⌨️ 코드 작성) - **Root Reducer**: `combineReducers()` 함수를 사용하여 Reducer들을 하나로 합친 것 `src/redux/reducers/index.js` ```jsx // combineReducers 함수 import 하는 코드 작성 // Reducer들을 import하는 코드 작성 // combineReducers 함수를 호출하여 rootReducer를 생성하는 코드 작성 export default rootReducer; ``` --- # Root Reducer (✅ 코드 확인) `src/redux/reducers/index.js` ```jsx import { combineReducers } from '../redux'; import counterReducer from './counterReducer'; const rootReducer = combineReducers({ counter: counterReducer, }); export default rootReducer; ``` --- # Store (⌨️ 코드 작성) - **Store**: 모든 state를 저장할 Store `src/redux/store.js` ```jsx // createStore 함수를 import 하는 코드 작성 // rootReducer를 import 하는 코드 작성 // createStore 함수와 rootReducer를 사용하여 store를 생성하는 코드 작성 export default store; ``` --- # Store (✅ 코드 확인) `src/redux/store.js` ```jsx import { createStore } from './redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); export default store; ``` --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/rWbcWmkm6N-fZCIipaQDq) # Connect
React & Redux --- # Provider (⌨️ 코드 작성) - **Provider**: Store에 있는 state들을 하위 컴포넌트로 전달해주는 역할을 하는 컴포넌트 `src/react-redux/index.jsx` ```jsx import { createContext } from 'react'; import PropTypes from 'prop-types'; export const ReduxContext = createContext(); export function Provider(props) { const { store, children } = props; return ( // ReduxContext의 Provider를 사용하여 // children에서 모든 state에 접근할 수 있도록 하는 코드 작성 ); } Provider.propTypes = { // PropTypes를 사용하여 store와 children의 타입을 지정하는 코드 작성 }; ``` --- # Provider (✅ 코드 확인) `src/react-redux/index.jsx` ```jsx import { createContext } from 'react'; import PropTypes from 'prop-types'; export const ReduxContext = createContext(); export function Provider(props) { const { store, children } = props; return ( {children} ); } Provider.propTypes = { store: PropTypes.shape({ getState: PropTypes.func, subscribe: PropTypes.func, dispatch: PropTypes.func, }), children: PropTypes.element, }; ``` --- # `useSelector()` 훅 (⌨️ 코드 작성) - **`useSelector()`**: selector 함수를 사용하여 Store에서 원하는 state만을 가져오는 훅 `src/react-redux/hooks/useSelector.js` ```jsx import { useContext, useSyncExternalStore } from 'react'; import { ReduxContext } from '..'; function useSelector(selector) { const reduxContext = useContext(ReduxContext); // useSyncExternalStore 훅을 사용하여 원하는 state만을 리턴하는 코드 작성 } export default useSelector; ``` --- # `useSelector()` 훅 (✅ 코드 확인) `src/react-redux/hooks/useSelector.js` ```jsx import { useContext, useSyncExternalStore } from 'react'; import { ReduxContext } from '..'; function useSelector(selector) { const reduxContext = useContext(ReduxContext); return useSyncExternalStore(reduxContext.subscribe, () => selector(reduxContext.getState()) ); } export default useSelector; ``` --- # `useDispatch()` 훅 (⌨️ 코드 작성) - **`useDispatch()`**: Store의 `dispatch` 함수를 리턴하는 훅 `src/react-redux/hooks/useDispatch.js` ```jsx import { useContext } from 'react'; import { ReduxContext } from '..'; function useDispatch() { const reduxContext = useContext(ReduxContext); // reduxContext를 사용하여 Store의 dispatch 함수를 리턴하는 코드 작성 } export default useDispatch; ``` --- # `useDispatch()` 훅 (✅ 코드 확인) `src/react-redux/hooks/useDispatch.js` ```jsx import { useContext } from 'react'; import { ReduxContext } from '..'; function useDispatch() { const reduxContext = useContext(ReduxContext); return reduxContext.dispatch; } export default useDispatch; ``` --- # `main` 파일 (⌨️ 코드 작성) `src/main.jsx` ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; // Store를 import 하는 코드 작성 // Provider를 import 하는 코드 작성 import App from './App.jsx'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')).render( {/* Provider와 Store를 사용해서 App 컴포넌트를 감싸는 코드 작성 */} ); ``` --- # `main` 파일 (✅ 코드 확인) `src/main.jsx` ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import store from './redux/store'; import { Provider } from './react-redux'; import App from './App.jsx'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')).render( ); ``` --- # `App` 컴포넌트 (⌨️ 코드 작성) `src/App.jsx` ```jsx // Action Creator들을 import 하는 코드 작성 // useSelector, useDispatch 훅을 import 하는 코드 작성 function App() { // useSelector 훅을 사용하여 count값을 가져오는 코드 작성 // useDispatch 훅을 사용하여 dispatch 함수를 가져오는 코드 작성 return (

count: {count}

); } export default App; ``` --- # `App` 컴포넌트 (✅ 코드 확인) `src/App.jsx` ```jsx import { incrementActionCreator, decrementActionCreator, } from './redux/actions/counterAction'; import useSelector from './react-redux/hooks/useSelector'; import useDispatch from './react-redux/hooks/useDispatch'; function App() { const count = useSelector((state) => state.counter.count); const dispatch = useDispatch(); return (

count: {count}

); } export default App; ``` --- ![bg width:100% height:auto](https://cdn.markslides.ai/users/1/images/VwUdaU1Qb18JPFpp72Uxm) --- ![bg width:100% height:auto](https://cdn.markslides.ai/users/1/images/CkGYkwMbC-zTyuiLCWsWc) --- ![bg width:100% height:auto](https://cdn.markslides.ai/users/1/images/7-7BphkO-Sx6oB7pttBih) --- # References - https://redux.js.org/ - https://github.com/reduxjs/redux - https://github.com/reduxjs/react-redux - https://react.dev/reference/react/useSyncExternalStore - https://github.com/soaple/my-redux - https://www.frontoverflow.com/document/1/%EC%B2%98%EC%9D%8C%20%EB%A7%8C%EB%82%9C%20%EB%A6%AC%EB%8D%95%EC%8A%A4%20(Redux) --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)