커스텀훅으로 투두리스트 input 리팩토링하기

Today, What I learned?

커스텀 훅에 익숙해져 보기 위해 투두리스트를 리팩터링 해보기로 했다.
기존의 코드 중에서 투두리스트를 추가하는 부분을 커스텀훅으로 만들어 보았다.

state와 dispatch, submitHandler 까지 모두 가져왔다.

 

useInput

import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { nanoid } from '@reduxjs/toolkit';
import { __addTodos } from '../redux/modules/todoSlice';

const useInput = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const dispatch = useDispatch();

  ...
    const newTodo = {
      id: nanoid(),
      title,
      content,
      isDone: false,
    };

    dispatch(__addTodos(newTodo));

    setTitle('');
    setContent('');
    return true;
  };

  return { title, content, changeTitleHandler, changeContentHandler, submitHandler };
};

export default useInput;

 

 

리팩토링 후

커스텀 훅을 적용하고 나니까 컴포넌트에 UI만 남아서 한결 보기 편하고, 관련된 로직을 한눈에 알 수 있게 되어 편한 것 같다.