22. 커스텀 Hooks 만들기 - 리액트 입문 | 벨로퍼트

 

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생합니다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복되죠. 이번에는 그러한 상황에 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보겠습니다.

 

커스텀 Hooks 를 만들 때에는 보통 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성합니다. 커스텀 Hooks 를 만드는 방법은 굉장히 간단합니다. 그 안에서 useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됩니다.

 

src 디렉터리에 hooks 라는 디렉터리를 만들고, 그 안에 useInputs.js 라는 파일을 만드세요.

/src/hooks/useInputs.js :

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  // change
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

이제 우리가 만든 useInputs Hook 을 App.js 에서 사용해볼까요? 이 작업을 하기 위해서는 먼저 useReducer 쪽에서 사용하는 inputs 를 없애고 이에 관련된 작업을 useInputs 를 대체해주어야 합니다. 새로운 항목을 추가 할 때 input 값을 초기화해야 하므로 데이터 등록 후 reset() 을 호출해주세요.

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

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

const initialState = {
  userInfo: [
    // ...
  ]
};

function reducer(state, action) {
  switch (action.type) {
    case 'CREATE_USER':
      return {
        users: state.userInfo.concat(action.user)
      };
    case 'TOGGLE_USER':
      return {
        users: state.userInfo.map(user =>
          user.id === action.id ? { ...user, active: !user.active } : user
        )
      };
    case 'REMOVE_USER':
      return {
        users: state.userInfo.filter(user => user.id !== action.id)
      };
    default:
      return state;
  }
}

function App() {
  const [{ username, email }, onChange, reset] = useInputs({
    username: '',
    email: ''
  });
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(4);
  const { userInfo } = state;

  const onCreate = useCallback(() => {
    dispatch({
      type: 'CREATE_USER',
      user: {
        id: nextId.current,
        username,
        email
      }
    });
    reset();
    nextId.current += 1;
  }, [username, email, reset]);
  
  // ...
}

export default App;

이렇게 커스텀 Hook 을 만들어서 사용하면 컴포넌트의 로직을 분리시켜서 필요 할 때 쉽게 재사용 할 수도 있습니다.

---

HOMEWORK

useInputs 커스텀 Hook 을 한번 useReducer 를 사용해서 구현해보세요.

 

import { useState, useReducer, useCallback } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "CHANGE_USER":
      return {
        ...state,
        [action.name]: action.value
      };
      
    case "RESET":
      return Object.keys(state).reduce((acc, current) => {
        acc[current] = '';
        return acc;
      }, {});
      
    default:
      throw new Error("Unhandled Action");
      ;
  }
}

function useInputs(initialState) {
  const [form, dispatch] = useReducer(reducer, initialState)

  const onChange = useCallback(e => {
    const {name, value} = e.target;
    dispatch({
      type: "CHANGE_USER",
      name,
      value
    })
  })
  
  const reset = useCallback(() => {
    dispatch({
      type: "RESET"
    })
  }, [])

  return [form, onChange, reset];
} 


export default useInputs;