17.7.4 TodosContainer를 Hooks로 전환하기

    이제 TodosContainer를 connect 함수 대신에 useSelectoruseDispatch Hooks를 사용하는 형태로 전환해 봅시다.

    containers/TodosContainer.js

    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 = () => {
      const { input, todos } = useSelector(({ todos }) => ({
        input: todos.input,
        todos: todos.todos
      }));
      const dispatch = useDispatch();
      const onChangeInput = useCallback(input => dispatch(changeInput(input)), [
        dispatch
      ]);
      const onInsert = useCallback(text => dispatch(insert(text)), [dispatch]);
      const onToggle = useCallback(id => dispatch(toggle(id)), [dispatch]);
      const onRemove = useCallback(id => dispatch(remove(id)), [dispatch]);
    
      return (
        <Todos
          input={input}
          todos={todos}
          onChangeInput={onChangeInput}
          onInsert={onInsert}
          onToggle={onToggle}
          onRemove={onRemove}
        />
      );
    };
    
    export default TodosContainer;

     

    이번에는 useSelector를 사용할 때 비구조화 할당 문법을 활용했습니다.

    또한, useDispatch를 사용할 때 각 액션을 디스패치하는 함수를 만들었는데요. 위 코드의 경우 액션의 종류가 많은데 어떤 값이 액션 생성 함수의 파라미터로 사용되어야 하는지 일일이 명시해 주어야 하므로 조금 번거롭습니다. 이 부분은 우선 컴포넌트가 잘 작동하는 것을 확인하고 나서 한번 개선해 보겠습니다. 코드를 저장하고 TodosContainer가 잘 작동하는지 확인해 보세요.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.