리액트 훅스 Hooks 7: 커스텀 훅

여러 컴포넌트에서 비슷한 기능을 공유할 경우 커스텀 훅을 이용하여 로직을 분할할 수 있습니다.

적절히 사용하면 컴포넌트를 깔끔하게 만들고 매인 로직에만 집중 할 수 있습니다.

 

기존 Info.js

import React, { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
      email:'',
      password:''
  });

  const {email, password} = state;
  const onChange = e => {
      dispatch(e.target);
  }

  return (
    <div>
      <div>
        <input name="email" value={email} onChange={onChange} />
        <input name="password" value={password} onChange={onChange} />
      </div>
    </div>
  );
};

export default Info;

위에 Info 컴포넌트에서 useReducer를 이용하여 작성했던 로직을 useInputs라는 훅으로 분리해보겠습니다.

 

useInputs.js

import React, {useReducer} from 'react';

function reducer(state, action) {
    return {
        ...state,
        [action.name]: action.value
    };
}

export default function useInputs(initialForm) {
    const [state, dispatch] = useReducer(reducer, initialForm);
    const onChange = e => {
        dispatch(e.target);
    };
    return [state, onChange];
}

다시 Info.js로 돌아와서..

 

import React, { useReducer } from "react";
import useInputs from "./useInputs";

const Info = () => {
  const [state, onChange] = useInputs({
    email: "",
    password: "",
  });

  const {email, password} = state;
  

  return (
    <div>
      <div>
        <input name="email" value={email} onChange={onChange} />
        <input name="password" value={password} onChange={onChange} />
      </div>
    </div>
  );
};

export default Info;

처음 Info컴포넌트보다 한층 간결해졌습니다.