hooks(react-redux 제공)로 컨테이너 컴포넌트 제작 가능 (connect 대신)

useSelector

• 리덕스 상태 조회 가능

• 사용법

  const 결과 = useSelector(상태 선택 함수)

useDispatch

• 컨테이너 컴포넌트에서 액션을 디스패치 할 때 사용
• useCallback과 함께 사용 추천
  • 컴포넌트 성능 최적화 위해
    • 사용하지 않을 경우 :컴포넌트가 리렌더링 될 때마다 함수가 새롭게 만들어짐
• 사용법

        // 기본형 (useCallback 과 함께 사용하지 않을 경우)
        const dispatch = useDispatch();
        dispatch({ type 'SAMPLE_ACTION' });

        // 추천 (useCallback 사용)
        import React,{useCallback} from 'react';

        const CounterContainer = () => {
        	// useCallback 사용 부분
          const onIncrease = useCallback(()=>dispatch(increase()),[dispatch])
          const onDecrease = useCallback(()=>dispatch(decrease()),[dispatch])

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

useStore

• 컴포넌트 내부에 리덕스 스토어 객체 직접 사용 해야 하는 상황에만 사용
• 사용법

        const store = useStore();
        store.dispatch({ type: 'SAMPLE_ACTION' });
        store.getState();

• 예시

    import React, { useCallback } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { changeInput, insert, toggle, remove } from '../modules/todos';
    import Todos from '../components/Todos';

    const TodosContainer = () => {
    	// useSelector (비구조화 할당 문법 활용)
      const { input, todos } = useSelector(({ todos }) => ({
        input: todos.input,
        todos: todos.todos,
      }));

    	// useDispatch
      const dispatch = useDispatch();
      const onChangeInput = useCallback(
        (input) => dispatch(changeInput(input)),
        [dispatch],
      );
     
      return (
        <Todos
          input={input}
          todos={todos}
          onChangeInput={onChangeInput}
        />
      );
    };

    export default TodosContainer;

useActions

• 여러 액션 사용 시 → 코드 깔끔⬆

• 기능
  액션 생성 함수를 액션을 디스패치 하는 함수로 변환
  ( '액션 생성 함수'를 사용해서 '액션 객체' 만듦 → 스토어에 디스패치하는 작업 함수 자동 완성 )

• 사용법

  • 1번째 파라미터: 배열 (액션 생성 함수로 이루어진)
  • 2번째 파라미터: deps 배열
    → 이 배열 내부 원소가 바뀌면, 액션을 디스패치하는 함수를 새로 만듦

• 사용 코드 예시

        // src/lib/useActions.js
        import { bindActionCreators } from 'redux';
        import { useDispatch } from 'react-redux';
        import { useMemo } from 'react';

        export default function useActions(actions, deps) {
          const dispatch = useDispatch();
          return useMemo(
            () => {
              if (Array.isArray(actions)) {
                return actions.map((a) => bindActionCreators(a, dispatch));
              }
              return bindActionCreators(actions, dispatch);
            },
            deps ? [dispatch, ...deps] : deps
          );
        }

        // src/containers/TodoContainer.js
        import useActions from '../lib/useActions';

        const [onChangeInput, onInsert, onToggle, onRemove] = useActions(
            [changeInput, insert, toggle, remove],
            [],
          );

connect 와 주요 차이점 (컨테이너 컴포넌트 만들 때)

• 성능 최적화
  해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때, 해당 컨테이너 컴포넌트의 props가 바뀌지 않았다면

  • connect : 리렌더링 자동 방지
  • useSelector : 최적화 작업 자동 x → **React.memo 필요**
    • React.memo 사용 방법

                // containers/TodosContainer.js
                export default React.memo(TodosContainer);

---

• 참고 '리액트를 다루는 기술'_저자 김민준