41일차

🦥

41일차

 

Part 11. Redux 로 상태관리하기

Ch 1. Redux Basic

 

---

 

 

Ch 1. Redux Basic

 

 

$ npm i redux

 

단일 스토어다!

 

• 단일 스토어다! 
• [만들기] 단일 스토어 사용 준비하기
  • import redux
  • 액션을 정의하고,
  • 액션을 사용하는, 리듀서를 만들고,
  • 리듀서들을 합친다.
  • 최종 합쳐진 리듀서를 인자로, 단일 스토어를 만든다
• [사용하기] 준비한 스토어를 리액트 컴포넌트에서 사용하기
  • import react-redux
  • connect 함수를 이용해서 컴포넌트에 연결

 

 

 🔗 Action (액션) 

 

function 액션생성자(...args) { return 액션; }

 

• 액션 생성자를 통해 액션을 만들어 냅니다.
• 만들어낸 액션 객체를 리덕스 스토어에 보냅니다.
• 리덕스 스토어가 액션 객체를 받으면 스토어의 상태 값이 변경 됩니다. 
• 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경됩니다.
• 액션은 스토어에 보내는 일종의 인풋이라 생각할 수 있습니다.

 

// ./redux/actions.js

export const ADD_TODO = "ADD_TODO";

export function addTodo(todo) {
  return { type: ADD_TODO, todo };
}

 

 

 🔗 Reducer (리듀서) : Immutable(불변)

 

function 리듀서(previousState, action) { 
  return newState;
}

 

// ./redux/reducers.js

import { ADD_TODO } from "./actions";

// state
// ['코딩', '점심 먹기']
const initialState = [];

export function todoApp(previousState = initialState, action) {
  // 초기값을 설정해주는 부분
  // if (previousState === undefined) {
  //   return [];
  // }

  if (action.type === ADD_TODO) {
    return [...previousState, action.todo];
  }
  return previousState;
}

 

 

 🔗 createStore : 스토어를 만드는 함수

 

const store = createStore(리듀서);

createStore<S>(
  reducer: Reducer<S>,
  preloadedState: S,
  enhancer?: StoreEnhancer<S>
): Store<S>;

 

• store.getState();
  
  • 현재 state 의 store 를 가져온다.
• store.dispatch(액션);, store.dispatch(액션생성자());
  
  • action 을 인자로 넣어서, state 의 상태를 변경시킨다.
• const unsubscribe = store.subscribe(() => {});
  • 리턴이 unsubscribe 라는 점 !
  • unsubscribe(); 하면 제거
  • store 의 변경이 생겼을 때 함수를 실행한다.
• store.replaceReducer(다른리듀서);
  • 원래 가지고 있던 리듀서를 다른 리듀서로 바꾼다.
  • 잘 안 쓰임.

 

// ./redux/store.js

import { createStore } from "redux";
import { todoApp } from "./reducer";

const store = createStore(todoApp);

export default store;

// ./index.js

...
import store from "./redux/store";
import { addTodo } from "./redux/actions";

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(addTodo("coding"));
store.dispatch(addTodo("read book"));
store.dispatch(addTodo("eat"));
unsubscribe();
store.dispatch(addTodo("coding"));
store.dispatch(addTodo("read book"));
store.dispatch(addTodo("eat"));

...

 

 

 🔗 combineReducers 

 

// ./redux/action.js

export const ADD_TODO = "ADD_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";

// {type: ADD_TODO, text: '할일'}
export function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}

// {type: COMPLETE_TODO, index: 3}
export function completoTodo(index) {
  return {
    type: COMPLETE_TODO,
    index,
  };
}

export const SHOW_ALL = "SHOW_ALL";
export const SHOW_COMPLETE = "SHOW_COMPLETE";

export function showAll() {
  return { type: SHOW_ALL };
}

export function showComplete() {
  return { type: SHOW_COMPLETE };
}

 

// ./redux/reducers/todos.js

import { ADD_TODO, COMPLETE_TODO } from "../actions";

const initialState = [];

// [{text: '코딩', done: false}, {text: '점심 먹기', done: false}]

export default function todos(previousState = initialState, action) {
  if (action.type === ADD_TODO) {
    return [...previousState, { text: action.text, done: false }];
  }

  if (action.type === COMPLETE_TODO) {
    return previousState.map((todo, index) => {
      if (index === action.index) {
        return { ...todo, done: true };
      }
      return todo;
    });
  }

  return previousState;
}

// ./redux/reducers/filter.js

import { SHOW_ALL, SHOW_COMPLETE } from "../actions";

const initialState = "ALL";

// 'ALL'
export default function filter(previousState = initialState, action) {
  if (action.type === SHOW_COMPLETE) {
    return "COMPLETE";
  }

  if (action.type === SHOW_ALL) {
    return "ALL";
  }

  return previousState;
}

// ./redux/reducers/reducer.js

import { combineReducers } from "redux";
import todos from "./todos";
import filter from "./filter";

const reducer = combineReducers({
  todos,
  filter,
});

export default reducer;

 

// ./redux/store.js

import { createStore } from "redux";
import reducer from "./reducers/reducer";

const store = createStore(reducer);

export default store;

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./redux/store";
import { addTodo, completoTodo, showComplete } from "./redux/actions";

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(addTodo("할일"));
store.dispatch(completoTodo(0));
store.dispatch(showComplete(0));

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

 

 🔗 Redux 를 React 에 연결 

 

• react-redux 안 쓰고 연결하기 (Context API)

// ./contexts/ReduxContext.js

import { createContext } from "react";

const ReduxContext = createContext();

export default ReduxContext;

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./redux/store";
import ReduxContext from "./contexts/ReduxContext";

ReactDOM.render(
  <React.StrictMode>
    <ReduxContext.Provider value={store}>
      <App />
    </ReduxContext.Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

 

// ./hooks/useReduxState.js

import { useContext, useEffect, useState } from "react";
import ReduxContext from "../contexts/ReduxContext";

export default function useReduxState() {
  const store = useContext(ReduxContext);

  const [state, setState] = useState(store.getState());

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setState(store.getState());
    });

    return () => {
      unsubscribe();
    };
  }, [store]);

  return state;
}

// ./hooks/useReduxDispatch.js

import { useContext } from "react";
import ReduxContext from "../contexts/ReduxContext";

export default function useReduxDispatch() {
  const store = useContext(ReduxContext);

  return store.dispatch;
}

 

// ./components/TodoList.jsx

import useReduxState from "../hooks/useReduxState";
import todos from "../redux/reducers/todos";

export default function TodoList() {
  const state = useReduxState();
  return (
    <ul>
      {state.todos.map((todo) => {
        return <li>{todo.text}</li>;
      })}
    </ul>
  );
}

// ./components/TodoForm.jsx

import { useRef } from "react";
import useReduxDispatch from "../hooks/useReduxDispatch";
import { addTodo } from "../redux/actions";

export default function TodoForm() {
  const inputRef = useRef();
  const dispatch = useReduxDispatch();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={click}>추가</button>
    </div>
  );

  function click() {
    dispatch(addTodo(inputRef.current.value));
  }
}

// ./App.js

import logo from "./logo.svg";
import "./App.css";
import { addTodo } from "./redux/actions";
import TodoList from "./components/TodoList";
import TodoForm from "./components/TodoForm";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <TodoList />
        <TodoForm />
      </header>
    </div>
  );
}

export default App;

 

 

• react-redux 쓰고 연결하기 (react-redux)
  • Provider 컴포넌트를 제공해줍니다.
  • connect 함수를 통해 "컨테이너"를 만들어줍니다.
    • 컨테이너는 스토어의 state 와 dispatch(액션) 를 연결한 컴포넌트에 props 로 넣어주는 역할을 합니다.​
    • 그렇다면 필요한 것은 ?
      • 어떤 state 를 어떤 props 에 연결할 것인지에 대한 정의
      • 어떤 dispatch(액션) 을 어떤 props 에 연결할 것인지에 대한 정의
      • 그 props 를 보낼 컴포넌트를 정의

 

$ npm i react-redux

 

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./redux/store";
import { Provider } from "react-redux";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

 

// ./container/todoistContainer.js

import { useSelector } from "react-redux";
import TodoList from "../components/TodoList";

function TodoListContainer() {
  const todos = useSelector((state) => state.todos);
  return <TodoList todos={todos} />;
}

export default TodoListContainer;

// ./comtianer/TodoFormContainer.js

import { useDispatch } from "react-redux";
import { addTodo } from "../redux/actions";
import TodoForm from "../components/TodoForm";
import { useCallback } from "react";

export default function TodoFormContainer() {
  const dispatch = useDispatch();

  const add = useCallback(
    (text) => {
      dispatch(addTodo(text));
    },
    [dispatch]
  );

  return <TodoForm add={add} />;
}

 

// ./components/TodoList.jsx

export default function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => {
        return <li>{todo.text}</li>;
      })}
    </ul>
  );
}

// ./components/TodoForm.jsx

import { useRef } from "react";

export default function TodoForm({ add }) {
  const inputRef = useRef();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={click}>추가</button>
    </div>
  );

  function click() {
    add(inputRef.current.value);
  }
}

// ./App.js

import logo from "./logo.svg";
import "./App.css";
import TodoListContainer from "./containers/TodoListContainer";
import TodoFormContainer from "./containers/TodoFormContainer";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <TodoListContainer />
        <TodoFormContainer />
      </header>
    </div>
  );
}

export default App;

 

 

 

---

 

오늘의 일기

 

 redux react 연결하기 수업 들으면서 블로그에 열심히 정리하던 중에 사진을 첨부했는데 갑자기 엑박이 뜨기 시작했고 너무 불안했지만 손가락을 먹으면서 기다렸다............................... 근데 화면이 멈췄다. 내 세상이 무너졌다. 정말 머리가 굳었다. 굳은 머리로 생각 해낸게 새로고침................................... 맹총이 내가 열심히 기록 했던 것들이 다 날라가버렸다. 진짜 아찔했고 너무 화가 나서 찐으로 눈물이 났다. 레알 울었다. 지금도 몇십분 동안 울으면서 끙끙대서 머리가 지끈지끈우지끈하다. 하 자동 저장 기능이 없는 ㅌㅅㅌㄹ를 원망하기 시작했다. 근데 왜 안 만들었을까 네이버는 있던데.............................. ㅌㅅㅌㄹ를 쓰는 내가 원망스러웠고 노션으로 바꿀까 진지하게 고민했다. 깃허브 연동 안 해놔서 옛날 코드는 없고... 희망을 가지고 ctrl Z 를 눌러봤지만 이미 저장해서 그런가 (아직도 왠지 모르겠네 분하다) 걍 뒤로가기가 안 되던데...................ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 몇시간동안 수업들은게 날라가니까ㅠㅠㅠㅠㅠ 왜냐면 코드도 없고 ppt 복붙하려 해도 수업 내용이랑 해당 코드가 다르더라.... 복습 하고 싶은데...............................................ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 다음에 프로젝트 짜면서 다시 보고 싶은데...ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 아하하하ㅏ하하하핳ㅎ하ㅏㅏ 진짜 다시 들을 시간이 없어서.. 시간이 너무 촉박한 날이었다..... 왜 하필 이럴 때 나에게 이런 시련이 왔나~ 머리를 팍팍팍팍 뜯고 싶다. 시간이 없지만 여기에 이걸 쓰고 있는 이유는 지금 뇌가 날라갔다... 아무 생각이 나지 않고 의지가 없다. 밥이나 먹고... 금쪽이 보고.. 하 나는 어떡해~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 지금 남아있는 코드랑 영상이랑 ppt 긁어 모아서 어떻게 수습하기는 했다. 내 코드가 아니고 주석 처리 한 것도 없어져서 찝찝하기는 하지만 뭐 지나간 일인데 우짜겠냐 욕한다고 지니가 찾아와 내 소원을 들어주지는 못할 것이다... 훌훌훌 날랴버랴 잘 했기를!!!!!!!!!!!!!!! 난 이제 정처기 공부 하러 가야겠다 쿰큼 다음에는 한 챕터할 때 마다 저장하고 말테야............................................................................................................................................. 깃허브도......................... 할거야 나.......................................................................................................................................................... 난 너무 슬퍼

일기 끝.

 

~ 그 후 뒷이야기 ~

 내가 정리한게 아니어서 놓친 부분이 있을까봐 찝찝하기도 하고 중요한 내용이니 복습도 할 겸 다시 정리하는 것도 나쁘지 않다고 생각해서 앞에 날라간 부분만 다시 들었다! 마음이 편하다 😇 위에 쓴 거 보니까 ㄹㅇ 멘붕왔던 거 같음ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ...^^ 하핫 오늘의 교훈: 짜증내고 화내고 자책할 시간에 재빠르게 다시 하는게 시간(++감정)이 더 절약된다. 끝.