11주 3일차 - Cmarket Redux 1

11주 3일차 - Cmarket Redux 1

1. 배운 것

2. 내용 정리

Redux 사용시 리액트 앱 파일 구조

• src > store > index.js
  • src 폴더의 하위 폴더로 리덕스 관련 코드 파일을 저장할 store 폴더를 생성하고 index.js 파일을 생성하여 리덕스 관련 로직들을 관리한다.
  • index.js에서 store 생성, reducer 함수 정의. (참고 강의와 다르게 과제 코드는 reducer와 store 별도 폴더로 분리됨. 미들웨어 사용 때문인지?)

Store 제공하기

• src > index.js
  • render함수 안에서 App 컴포넌트를 Provider 컴포넌트로 감싼다. (전역 상태를 관리하기 위해 App 컴포넌트를 감싼다.)
  • 이 때 Provider 컴포넌트의 속성으로 반드시 store를 제공해야 한다.

// src > index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; // 추가
import { store } from './store/index'; // 추가

import './index.css';
import App from './App';

// * Provider 컴포넌트를 store 속성과 함께 사용
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

---

컴포넌트에서 리덕스 데이터 사용하기

• src > components > Counter.js
  • react-redux 라이브러리의 useSelector Hook을 import.
  • 컴포넌트 내 리턴문 상단에서 useSelctor 훅의 인수로 리덕스가 관리하는 상태에서 추출한 값을 받는다.

// src > components > Counter.js

import { useSelector } from 'react-redux'; // 추가
import classes from './Counter.module.css';

const Counter = () => {
  // When using useSelector,
  // React-Redux will automatically set up a subscription
  // useSelector 를 사용하여 redux store에서 상태가 바뀔 때마다,
  // 가장 최신의 state.counter 값을 받는다.
  const counter = useSelector(state => state.counter);
  const toggleCounterHandler = () => {};

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>
				**{counter}**
			</div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

Reducer 함수 정의하기

• src > store > index.js

// src > store > index.js
// src 폴더의 하위 폴더로 리덕스 관련 코드 파일을 저장할 store 폴더를 생성하고 index.js 파일을 생성하여 리덕스 관련 로직들을 관리한다.

import { createStore } from 'redux';

function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case '증가':
      return {
        counter: state.counter + 1,
      };

    case '감소':
      return {
        counter: state.counter - 1,
      };

    default:
      return state; // { counter: 0 }
  }
}

const store = createStore(counterReducer);

export default store;

---

내부 컴포넌트에서 action을 Dispatch 하기

src > store > index.js 에서 정의한 reducer 함수의 identifier와 동일한 type의 값을 dispatch 해주어야 함.

Payload 보내기

reducer 함수에서 모든 action.type의 값 마다 조건 분기를 일일이 하드코딩하는건 scalable 하지 않다.

실제 프로그램이라면 유저의 입력값에 따라 state가 변경되어야 하므로 하드코딩으로 대응할 수 없음.

따라서 reducer 함수 내에서 action.프로퍼티명 으로 dispatch 함수가 전달한 action 객체의 해당 프로퍼티의 값에 따라 유동적으로 state를 변경 가능.

**// src > store > index.js**

function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case '증가':
      return {
        counter: state.counter + 1,
      };

    **case '가변적인증가':
      return {
        counter: state.counter + action.amount,
      };**

    case '감소':
      return {
        counter: state.counter - 1,
      };

    default:
      return state; // { counter: 0 }
  }
}

**// src > components > Counter.js**

const increaseHandler = () => {
    // 실제 프로그램이라면 유저의 인풋값을 받아오겠지만,
    // 연습예제이므로 우선 amount: 5 로 payload 하드코딩.
    dispatch({ type: '가변적인증가', amount: 5 });
  };

Cmarket Redux 과제 정리

내일 포스팅할래….

더 공부할 내용

3. 리뷰

39기에서 마음속으로 롤모델 삼던 분들 중 한 분과 페어로 이번 과제를 진행할 수 있어 좋았다.