[React] 📖Custom Hooks

▷ Custom Hooks

개발자가 스스로 커스텀한 훅을 의미하며,
반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.

여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등
반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때
커스텀 훅을 주로 사용한다.

❗️Custom Hooks의 특징들
− 그저 로직만 공유할 뿐, state는 컴포넌트 내에서 독립적으로 정의되어 있다.
− Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙여야 한다.
− 일반 함수와는 다르게 React 내장 hook을 사용할 수 있다.
− 대부분 hooks 디렉토리에 Custom Hook을 위치시킨다.
− return 하는 값이 조건부여서는 안된다.

📘로컬 스토리지 사용하기에서 커스텀 훅을 사용한 예시를 보고 오자.

📖 Custom Hook의 예시

− 여러 url을 fetch할 때 쓸 수 있는 useFetch Hook

const useFetch = ( initialUrl:string ) => {
	const [url, setUrl] = useState(initialUrl);
	const [value, setValue] = useState('');

	const fetchData = () => axios.get(url).then(({data}) => setValue(data));	

	useEffect(() => {
		fetchData();
	},[url]);

	return [value];
};

export default useFetch;

− 여러 input에 의한 상태 변경을 할 때 쓸 수 있는 useInputs Hooks

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;