[💻 코드스테이츠 FE 44기] ✨야간자율학습반✨ Redux 실습 의사코드 작성

✔️ 시작

이번 종합 퀴즈 중복 정답이 많았는데 둘 다 아깝게 하나 씩 빠져서
야간자율학습반(반딧불이반에서 변경 됨)에 선정되었다.

📍 Redux 실습

오늘 학습한 내용

• 전역 상태관리의 필요성을 이해한다.
• React의 Props Drilling이 문제가 되는 상황을 이해한다.
• Redux의 구성 요소와 기본 사용법을 기억한다.

Redux는 Action - Dispatch - Reducer - Store순으로 진행된다.

• Action에서 객체 형식의 type을 만들어 어떤 액션을 줄 것인지 결정한다.
• Dispatch 인자는 Action 객체로 Reducer 함수에 전달한다.
• Reducer는 Action 객체의 type에 따라 값을 다르게 해주며 Store의 state를 변경해 준다.

💻 index.js

• Action, Reducer, Store 작업을 해주었다.
• 작업에 진행하기 전 Provider, createStore를 불러와야한다.

import React from 'react';
import { createRoot } from 'react-dom/client';
// Provider 불러오기
import { Provider } from 'react-redux';
// createStore 불러오기
import { legacy_createStore as createStore } from 'redux';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// Action type 변수로 선언하기
// 오타 방지, 재사용성, 자동 입력에 좋다.
const PLUS = 'PLUS';
const MINUS = 'MINUS';

// Action 생성자 함수로 만들어 관리하기
// 외부에서 사용 가능 하도록 export 붙여주기
export const increase = () => {
  return {
    type: PLUS,
  };
};

export const decrease = () => {
  return {
    type: MINUS,
  };
};

const count = 1;

// reducer 함수 생성 Action type에 따른 다른 이벤트 주기
// 첫번째 인자: state, 두번째 인자: action
const reducer = (state = count, action) => {
  switch (action.type) {
    case PLUS:
      return state + 1;
    case MINUS:
      return state - 1;
    default:
      return state;
  }
};

// store 생성 후
// reducer 함수 인자로 전달
const store = createStore(reducer);

root.render(
  // Provider 컴포넌트 생성 후
  // store props로 전달하기
  <Provider store={store}>
    <App />
  </Provider>
);

💻 App.js

• React Hook을 활용해 진행한다.
  - useSelector를 이용해 state에 접근할 수 있다.
  - useDispatch를 이용해 dispatch 함수를 사용할 수 있다.

import React from 'react';
import './style.css';
// useSelector, useDispatch 불러오기
import { useSelector, useDispatch } from 'react-redux';
// index.js에 있는 increase, decrease 불러오기
import { increase, decrease } from './index.js';

export default function App() {
  // useDispatch를 이용해 dispatch 함수 사용
  const dispatch = useDispatch();
  // useSelector를 이용해 state 접근
  const state = useSelector((state) => state);

  const plusNum = () => {
    // dispatch함수 인자는 Action type의 값
    dispatch(increase());
  };

  const minusNum = () => {
    // dispatch함수 인자는 Action type의 값
    dispatch(decrease());
  };

  return (
    // state 값으로 변경 해 주기 ${state}
    <div className="container">
      <h1>{`Count: ${state}`}</h1>
      <div>
        <button className="plusBtn" onClick={plusNum}>
          +
        </button>
        <button className="minusBtn" onClick={minusNum}>
          -
        </button>
      </div>
    </div>
  );
}

완성

잘 작동하는 걸 확인할 수 있다.

잘 모르는 부분

• 외부에 사용할 경우 export 붙여 주는걸 알게 되었다

export const increase = () => {
  return {
    type: PLUS,
  };
};

• Action의 type을 변수로 관리하면 오타 방지, 자동완성, 재사용성에 용이하다.

const PLUS = 'PLUS';
const MINUS = 'MINUS';

export const increase = () => {
  return {
    type: PLUS,
  };
};

export const decrease = () => {
  return {
    type: MINUS,
  };
};

• state의 값을 훼손 하면 안된다.(원본 훼손x)
  - spread syntax(...state), Object.assign 등을 이용해 작업해 준다.(값 복사)
• Action중
  - payload는 type외에 구체적으로 값을 설정해 주는 것이다.
  - 꼭 payload라고 이름을 지어주지 않아도 되는 거 같다.
  - action 값을 불러 올 때는 객체 형식 처럼 action.type, action.payload 등으로 작성하면 된다.

export const increase = () => {
  return {
    type: PLUS,
    payload: {
    	id
    }
  };
};

어려웠던 부분

• useDispatch, useSelector를 컴포넌트 최상위에 넣어주면 되는데 그 밖에 넣어줘 한참 헤맸던 거 같다.

// 초반에 작성한 위치
// const dispatch = useDispatch();
// const state = useSelector((state) => state);
export default function App() {
  const dispatch = useDispatch();
  const state = useSelector((state) => state);
  return (
  );
}

✏️ 느낀점

Redux는 흐름의 순서만 이해하면 작성하는 방법은 생각 보다 간단했던 것 같다.

단, 그 흐름을 이해하는데 오랜 시간이 걸렸다.