[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 50회차 미션 - 35강 Redux connect, HOC

connect HOC 함수를 통해 클래스형 컴포넌트에서 리덕스 연동하기

사실 쓸 일 별로 없다. useSelector와 useDispatch쓰는 것이 우선시 되어야 한다. 컴포넌트를 만들때는 함수형 컴포넌트를 쓰는게 우선시 되어야 한다. 그치만 옛날에 만든 클래스형 컴포넌트를 유지보수 해야하는 상황이 생긴다면 connect를 알아야 한다.
Props를 통해 리덕스의 상태 또는 액션을 디스패치 하는 함수를 받아온다.

HOC란?

재사용되는 값, 함수를 Props로 받아올 수 있게 해주는 옛날 패턴이다.
이제는 Hooks로 많이 대채되었다.

connect 사용해서 컴포넌트 구하기

만약에 클래스 컴포넌트를 수정해야할일이 있을수도 있으니 지금 만든 우리의 코드를 커넥트로 바꿔보자.

CounterContainer.js

import React from "react";
import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increase, decrease, setDiff } from "../modules/counter";

function CounterContainer({ number, diff, increase, decrease, setDiff }) {
  return (
    <Counter
      number={number}
      diff={diff}
      onIncrease={increase}
      onDecrease={decrease}
      onSetDiff={setDiff}
    />
  );
}
const mapStateToProps = (state) => ({
  number: state.counter.number,
  diff: state.counter.diff,
});

const mapDispatchToProps = {
  increase,
  decrease,
  setDiff,
};

export default connect(mapStateToProps, mapDispatchToProps)(CounterContainer);

TodosContainer.js

import React, { useCallback } from "react";
import { connect } from "react-redux";
import Todos from "../components/Todos";
import { addTodo, toggleTodo } from "../modules/todos";

function TodosContainer({ todos, addTodo, toggleTodo }) {
  const onCreate = useCallback((text) => addTodo(text), [addTodo]);
  const onToggle = useCallback((id) => toggleTodo(id), [toggleTodo]);

  return <Todos todos={todos} onCreate={onCreate} onToggle={onToggle} />;
}
const mapStateToProps = (state) => ({ todos: state.todos });
const mapDispatchToProps = {
  addTodo,
  toggleTodo,
};
export default connect(mapStateToProps, mapDispatchToProps)(TodosContainer);

이렇게 바꿔줄 수도 있다. 하지만 함수형 컴포넌트에서는 Hooks가 메인이니 Hooks를 사용하도록 하자.

connect에 대해 알아두면 좋은 것들

필요할때 찾아보고 참고하도록 하자!

정리

프로젝트가 커지면 커질수록 리덕스로 관리하는게 컨텍스트 API를 직접 쓰는 것보다 더 편해질수 있다. 또한 리덕스 미들웨어와 함께라면 일반 컨텍스트 API보다 훨씬 좋다고 한다.
곧 이어지는 미들웨어는 포스팅은 좀 쉬고 수업과 실습에 집중해보도록 하자! 오늘을 마지막으로 50일간의 포스팅을 마친다 ㅜㅜ 고생했다 토닥토닥!!

자세한건 벨로퍼트의 위키를 참고하길 바라며..
오늘은 여기까지..
시청 영상 35강 12~15까지

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