커스텀 Hooks

벨로퍼트와 함께하는 모던 리액트: 커스텀 Hooks 만들기

 

커스텀 Hooks에 관한 "첫인상"

(1) 여러가지 Hooks들을 합친 함수로 모듈화가 가능(한 것 같다)

(2) 자주 사용되는 로직을 모듈화 가능(예: input 관련된 state)

 

(*궁금한 점*)

어떻게 쓰이는걸까.. onChange나 다른 함수가.. 어떻게 값을 반영하는걸까..

 

1. src 폴더에 hooks 디렉터리 만들기

2. use[함수명].js (예: useInputs.js)

3. useState, useEffect, useReducer, useCallback등 Hooks를 활용하여 기능을 구현.

4. *컴포넌트에서 사용하고 싶은 값들을 반환*

=> 여기서는 initialForm으로 초기화를 했는데, 객체, 단일변수 모두 가능한 것 같다.

//useInpust.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;

 

결국은, state(여기선 initialForm으로 들어오는 값), onChange, 다른 함수 등의 기능은 어딘가에 선언되어 있고 할당되어있다.

그것을 원래 사용하는 것처럼 할당해주면 된다. value에 대입하는 부분에 initialForm의 어떤 값을 대입하고, onChange 속성에 대입하는 방식처럼. 그냥 똑같이 해주면 된다. 구현해놓은 기능들은 커스텀 Hooks에 들어가 있기 때문에.

만약 모듈화를 한다면, 기억해두면 좋은 점은 객체를 state로 놓고 useReducer 처럼 사용해도 될 것 같다.

분기가 있거나, setState({...arr, [name]:value }) 이런 형식으로도 사용 가능.

다만, 다른 Hooks들과 같이 쓸 때 더 유용할 것 같다.