[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 47회차 미션 - 35강 Redux 카운터 구현하기, 개발자 도구

카운터 구현하기

src에 components 폴더를 만들자. 우리가 이번엔 프리젠테이셔널 컴포넌트 방식으로 작업을 진행할 것인데 여기서 프리젠테이셔널 컴포넌트가 뭐냐. 리덕스 스토어에 직접 접근하지 않고 필요한 값 또는 함수만 props로 받아와서 사용하는 방식을 말한다. components에 Counter.js를 만들자.

Counter.js

import React from "react";

function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) {
  const onChange = (e) => {
    onSetDiff(parseInt(e.target.value, 10));
  };
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <input type="number" value={diff} onChange={onChange} />
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
      </div>
    </div>
  );
}

export default Counter;

Counter에서는 UI를 구현하는데 집중한다. 이번에는 containters라는 폴더를 만들텐데 그 안에는 리덕스에 있는 상태를 조회하거나 액션을 디스패치 할 수 있는 컴포넌트를 의미한다. 그 안에 CounterComponent를 만들어보자.

CounterContainer.js

import React from "react";
import { useSelector, useDispatch } from "react-redux"; //useSelecor 상태를 조회, useDispatch 액션을 디스패치 함.
import Counter from "../components/Counter";
import { increase, decrease, setDiff } from "../module/counter";

function CounterContainer() {
  const { number, diff } = useSelector((state) => ({
    //리덕스의 현재 상태를 받아옴
    number: state.counter.number,
    diff: state.counter.diff,
  }));
  const dispatch = useDispatch(); //액션을 만들고 연동함.

  const onIncrease = () => dispatch(increase());
  const onDecrease = () => dispatch(decrease());
  const onSetDiff = (diff) => dispatch(setDiff(diff));

  return (
    <Counter
      number={number}
      diff={diff}
      onIncrease={onIncrease}
      onDecrease={onDecrease}
      onSetDiff={onSetDiff}
    />
  );
}

export default CounterContainer;

이제 App에서 Counter를 렌더링한다.

App.js

import React from "react";
import CounterContainer from "./containers/CounterContainer";

function App() {
  return <CounterContainer />;
}

export default App;

잘 구현되는 것을 볼 수 있다. 프리젠테이셔널 컴포넌트에 대한 패턴은 아래 사진을 참고하도록 한다.
이렇게 해도 되긴 하지만 또 굳이 이렇게 할 필요는 없다. 아직까지는 정석이긴 한데 이게 불편하게 느껴진다면 편한대로 하자.

리덕스 개발자 도구 적용하기

지금까지 어떤 액션들이 디스패치 됐는지 액션 상태를 뒤로 되돌릴 수도 있고 개발자 도구에서 바로 디스패치 할수도 있다. 설치방법을 알아보자. 먼저 구글에 Redux Devtools라고 검색하고 웹스토어에서 설치를 한다. 그 다음엔 프로젝트 안에서 터미널을 실행한다.

yarn add redux-devtools-extension

그리고 나서 index.js를 열어서

import { compoesWithDevtools } from 'redux-devtools-extension;

const store = createStore(rootReducer, compoesWithDevtools());

이렇게 추가해준다. 이제 크롬에서 개발자도구를 열면 redux탭이 생긴걸 볼 수 있다. 액션을 디스패치하면 패널에 바로 나타난다. 여러가지를 확인해 볼 수 있다.

역시나 이외의 자세하고 정확한 내용은 벨로퍼트의 위키를 참고하길 바라며..
오늘은 여기까지..
시청 영상 35강 06~07까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp