21. 커스텀 Hooks 만들기

/* useInputs.js */

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  // useState를 이용해 form을 관리
  // 이전의 inputs, setInputs와 동일한 역할이다.
  const [form, setForm] = useState(initialForm);

  // onChange 구현
  // 이전과 동일하게 target의 name과 value를 받아와서 form을 업데이트 한다.
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);

  // reset 함수. form의 값을 초기값으로 돌린다.
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

/* useInputs.js */

import { useReducer, useCallback } from 'react';

// reducer 구현
function reducer(state, action) {
  switch (action.type) {
    // onChange용 action
    case 'CHANGE':
      return {
        ...state,
        [action.name]: action.value
      };
    // 값 초기화를 위한 action
    case 'RESET':
      return Object.keys(state).reduce((acc, current) => {
        acc[current] = '';
        return acc;
      }, {});
    default:
      return state;
  }
}

function useInputs(initialForm) {
  const [form, dispatch] = useReducer(reducer, initialForm);
  // change
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch({ type: 'CHANGE', name, value });
  }, []);
  const reset = useCallback(() => dispatch({ type: 'RESET' }), []);
  return [form, onChange, reset];
}

export default useInputs;

/* App.js */

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
// ...
// useInputs를 import
import useInputs from './hooks/useInputs';

function countActiveUsers(users) { /* ... */ }

const initialState = {
  // inputs 제거
  /* 
   * inputs: {
   * username: '',
   * email: ''
   * },
   */
  users: [ /* ... */ ]
};

function reducer(state, action) {
  switch (action.type) {
  // CHANGE_INPUT 제거
  /*
   * case 'CHANGE_INPUT':
   * return {
   *    ...state,
   *    inputs: {
   *      ...state.inputs,
   *      [action.name]: action.value
   *    }
   *  };
   * default:
   *   return state;
   */
    case 'CREATE_USER':
      return {
        // initialState에서 inputs를 제거했으므로 아래의 코드를 삭제한다.
        // inputs 초기화는 useInputs에서 가져온 reset 함수로 대체한다.
        // inputs: initialState.inputs,
        users: state.users.concat(action.user)
      };
    case 'TOGGLE_USER':
      return { /* ... */ };
    case 'REMOVE_USER':
      return { /* ... */ };
    default:
      return state;
  }
}

function App() {
  // useInputs에서 inputs, onChange, reset을 받아온다.
  // inputs는 username, email로 구조 분해 할당해서 받아온다.
  const [{ username, email }, onChange, reset] = useInputs({
    username: '',
    email: ''
  });

  // ...

  // initialState에서 inputs를 제거했으므로 아래의 코드를 삭제한다.
  // username, email은 위의 useInputs에서 받아온다.
  // const { username, email } = state.inputs;

  // onChange 제거
  /*
   * const onChange = useCallback(e => {
   *   const { name, value } = e.target;
   *   dispatch({
   *     type: 'CHANGE_INPUT',
   *     name,
   *     value
   *   });
   * }, []);
   */

  const onCreate = useCallback(() => {
    dispatch({ /* ... */ });
    reset(); // 생성을 끝내면 입력 form을 초기화한다.
    nextId.current += 1;
  }, [username, email, reset]);

  const onToggle = useCallback(id => { /* ... */ }, []);
  const onRemove = useCallback(id => { /* ... */ }, []);

  // ...

  return ( /* ... */ );
}

export default App;