TIL 51일차 -  [React] Redux 2

---

실습 [App.js] 코드

👇 [App.js]

import React from 'react';
import './style.css';

{/* 
import { useDispatch, useSelector } from 'react-redux';를 
통해 react-redux에서 useSelector를 불러와주세요.
*/}

import {useSelector} from 'react-redux';

{/*
import { useDispatch } from 'react-redux';를 통해 
react-redux에서 useDispatch를 불러와주세요. 
*/}

import {useDispatch} from 'react-redux';

// 두 개를 동시에 불러올 수 있다.
// import {useSelector, useDispatch} from 'react-redux';

{/* 
import { increase,decrease } from './index.js';를 통해 
Action Creater 함수 increase, decrease를 불러와주세요. */}

import {increase, decrease} from './index.js';


export default function App() {

 {/* 
 useDispatch의 실행 값을 변수에 저장해서 
 dispatch 함수를 사용합니다.(콘솔결과를 확인해보세요!) 
 */}
 
  const dispatch = useDispatch()
  console.log(dispatch);

  {/* 
  useSeletor를 통해 state가 필요한 컴포넌트에서
  전역 변수 저장소 store에 저장된 state를 쉽게 불러올 수 있습니다. 
  */}
  
  {/*
  useSelector의 콜백 함수의 인자에 Store에 저장된 
  모든 state가 담깁니다.
  그대로 return을 하게 되면 Store에 저장된 
  모든 state를 꺼내 사용할 수 있습니다. 
  */}
  
  const state = useSelector((state) => state);
  
  {/* 
  변수 state를 콘솔에서 확인해보세요. 
  Store에 저장된 기존 state 값인 1이 찍히는 것을 확인할 수 있습니다. 
  */}
 
  console.log(state);

  {/* 
  dispatch 함수는 이벤트 핸들러 안에서 사용됩니다.
  그리고 dispatch 함수는 action 객체를 Reducer 함수로 전달해줍니다. 
  */}
  
  {/* 
  이벤트 핸들러 onClick={plusNum}과, 
  onClick={minusNum}안에서 dispatch를 통해 
  action 객체를 Reducer 함수로 전달해주세요. 
  */}
  
  const plusNum = () => {
    dispatch(increase());
    console.log(plusNum);
  };

  const minusNum = () => {
    dispatch(decrease());
    console.log(minusNum);
  };

  return (
    <div className="container">
     {/* 
     Store에서 꺼내온 state를 화면에 나타내기 위해 
     변수 state를 활용해보세요. 
     */}
     
     {/* 
     '+', '-' 버튼을 누를 때마다 state가 변경되는 것을 
     확인할 수 있습니다!
     */}
     
      <h1>{`Count: ${state}`}</h1>
      <div>
        <button className="plusBtn" onClick={plusNum}>
          +
        </button>
        <button className="minusBtn" onClick={minusNum}>
          -
        </button>
      </div>
    </div>
  );
}

출처 : codestates

---

실습 [index.js] 코드

👇 [index.js]

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
{/*
import { Provider } from 'react-redux';
react-redux에서 Provider를 불러와야 합니다.
*/}

{/*
import { Provider } from 'react-redux';
redux에서 createStore를 불러와야 합니다.
createStore 나 legacy_createStore로 불러올 수 있다.
*/}

import { legacy_createStore as createStore } from 'redux';

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

{/*
Action은 어떻게 state를 변경할지 정의해놓은 객체입니다.
Action 객체는 Dispatch 함수를 통해 
Reducer 함수 두번째 인자로 전달됩니다.
*/}

{/*
Action 객체 안의 type은 필수로 지정을 해주어야 합니다.
여기서 지정한 type에 따라 Reducer 함수에서 새로운 state를 리턴하게 됩니다.
*/}

{/*
Action Creator 함수 icrease, decrease를 만들어 주세요. 
type은 'INCREASE', 'DECREASE'로 설정합니다.
payload는 특정한 값을 받아서 reducer로 전달하고 싶을 때 사용하는데,
고정된 값이 아닌 조건에 따라 변할 수 있도록 객체를 만들어주는 함수를 전달 인자로 받아 payload에서 사용합니다.
// payload가 필요한 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}
*/}

{/*
앞서 만든 Action Creator 함수를 다른 파일에도 사용하기 위해 
export를 붙혀주세요.
*/}

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

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


const count = 1;

{/* 
Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
Reducer함수 첫번째 인자에는 기존 state가 들어오게 됩니다.
*/}

{/*
첫번째 인자에는 default value를 꼭 설정해주셔야 합니다!
그렇지 않을 경우 undefined가 할당되기 때문에 
그로 인한 오류가 발생할 수 있습니다.
*/}

{/*
두번째 인자에는 action 객체가 들어오게 됩니다.
action 객체에서 정의한 type에 따라 새로운 state를 리턴합니다.
*/}

const counterReducer = (state=count, action ) => {

{/*
Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
*/}

  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
	}
 // Reducer가 리턴하는 값이 새로운 상태가 됩니다.
}

{/*
변수 store에 createStore 메서드를 통해 store를 만들어 줍니다.
그리고, createStore에 인자로 Reducer 함수를 전달해주어야 합니다.
(지금 단계에서는 임시의 함수 reducer를 전달해주겠습니다.)
*/}

{/*
새로운 state는 전역 변수 저장소 Store에 저장되게 됩니다.
*/}

const store = createStore(counterReducer);


{/*
Provider는 store를 손쉽게 사용할 수 있게 하는 컴포넌트입니다.
해당 컴포넌트를 불러온 다음에, Store를 사용할 컴포넌트를 감싸준 후,
Provider 컴포넌트의 props로 store를 설정해주면 됩니다.
*/}

{/*
전역 상태 저장소 store를 사용하기 위해서는 App 컴포넌트를
Provider로 감싸준 후 props로 변수 store를 전달해주여야 합니다.
*/}

root.render(
  <Provider store={store}>
  <App />
 </Provider>
);

출처 : codestates

현재는 index.js에 모든 리덕스 코드들이 위치하고 있다.
지금과 같이 여러 역할을 하는 코드들을 한 곳에 작성하는 것은 옳지 않다.

그 이유는 대표적으로 코드의 가독성이 매우 나빠지기 때문이다.
코드의 가독성이 나빠지게 되면 오류 발생 시 디버깅하기가 매우 어려워진다.

그러므로 index.js에 모여있는 리덕스 코드를 역할 별로 코드를 나누는 것이 좋다.

• Actions
  • type의 문자열을 변수화한 이유는 세가지 이유가 있다.
    1. 오타를 방지할 수 있다.
    2. 자동완성 기능을 통해 코드 생산성을 높일 수 있다.
    3. 코드를 재사용하기 용이하다.
       (예시: Action Creator 함수, Reducer 함수)

• Reducer
  • 만약 여러 개의 Reducer를 사용하는 경우,
    Redux의 combineReducers 메서드를 사용해서
    하나의 Reducer로 합쳐줄 수 있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

---

const count= 1인 초기 상태

초기 상태에서 + 버튼을 1번 눌렀을 때

count: 2일 때, - 버튼을 1번 눌렀을 때

count: 1일 때, - 버튼을 1번 눌렀을 때

출처 : codestates

---

과제 - Cmarket Redux

어제 진행한 과제 코드를 하나 하나 분석해 본다.

---

소감

🔡➡️💻➡️🤓👍

오늘은 페어 시간에 종합퀴즈를 같이 풀어보고,
과제 파일들과 코드들을 하나씩 이해해보았다.
최근 학습 중에 가장 재밌었고, 잘 이해한 것 같아
정말 처음으로 수업시간이 기다려졌다.

다음주에는 웹에 대해 배우는데
다음주에도 재밌게 잘 공부해야겠다! 🤩