Custom Hooks

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

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

 

#장점

-상태관리 로직의 재활용이 가능.

-클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.

-함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다.

 

#Custom Hook을 정의할때 규칙.

- 함수 이름 앞에 use를 붙인다.

-대개의 경우 프로젝트 내의 hooks 디렉토리에 custom hook을 위치시킨다.

-함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은조건부 여서는 안된다. 

 

#이렇게 만들어진 custom hook은 hook 내부에 useState와같은 react 내장 hook을 사용하여 작성할수있다.

hook의 특성때문에 일반함수내부에서는 hook을 불러 사용할수 없지만 custom hook에서는 가능하다는것 또한 알아두면 좋다.

 

#그러나 같은 custom hook을 사용했다고 해서 두개의 컴포넌트가 같은 state를 공유하는것은 아니다. 그저 로직만 공유할뿐, state는 컴포넌트 내에서 독립적으로 정의되어있다.

---

# 여러 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;

 

---

출처

코드스테이츠