Custom Hook, Custom Hook 장점, 규칙

Custom Hook이란?

개발자가 커스텀한 Hook!

상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을때 커스텀 Hook을 사용한다. 

 

Custom Hook의 장점

1. 상태 관리 로직의 재활용이 가능하다. 

2. 보다 적은 양의 코드로 동일한 로직을 구현할 수 있다. 

3. 직관적으로 코드를 짤 수 있어서 명료하다. 

 

Custom Hook 만들 때 규칙

1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이기

2. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안된다.

3. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다.

 

주의할 점

Custom Hook을 사용했다고 해서 두 개의 컴포넌트가 같은 state를 공유하는 것이 아니다.

그저 로직만 공유할 뿐, state는 컴포넌트 내에서 독립적으로 정의 되어 있다.

 

Custom Hook 예시

 

1. 여러 url을 fetch할 때 쓸 수 있는 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;

 

2. 여러 input에 의한 상태 변경을 할 때 쓸 수 있는 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;

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓