(React)카운터 Redux로 만들기 -2

가장 기본 예제인 카운터를 redux를 이용해 만들어 볼거다
항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번기회에 타파할 예정이다.
참고 유데미 강의
React 완벽 가이드 with Redux, Next.js, TypeScript

 

(React)카운터 redux로 만들기 -1

이번글을 보기전에 링크를 먼저 보고 오시면 됩니다. 쭉이어서 작업을 하니까요.

 

Counter.js에 UseSelector를 활용해서 counter를 표시해줄거다.

 

Counter.js 코드

import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

작업 후 화면을 보면 0이 나온다. 나는 사실 깜짝 놀랐다. 어떻게 0이 나올 수 있지?? 곰곰히 생각해보니 index.js에서App 컴포넌트를 Provider로 감싸주고 store를 props 넘겨주었다. App 컴포넌트에 Counter컴포넌트가 있으니 state.counter를 꺼내서 사용할 수 있는 것 같다.

이런 나의 가설을 확인하기 위해 console.log를 찍어봐야겠다.

import { legacy_createStore } from 'redux';

const counterReducer = (state = { counter: 0, name: '싼쵸' }, action) => {
  if (action.type === 'increment') {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === 'decrement') {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};
const store = legacy_createStore(counterReducer);

export default store;

store 안에 index.js 파일에서 state 안에 name를 추가했다.

import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const name = useSelector((state) => state.name);
  console.log('싼쵸확인', name);
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

Counter.js 에서 name를 찍어보았다. 

아래 사진처럼 콘솔로그가 잘 찍힌 것을 확인할 수 있다. 

이 실험를 하면서 알게된 사실인데 부끄럽지만 useSelector의 용도를 확실히 깨달았다 ㅋㅋㅋ