[React]Custom Hooks

haha-rumi·2022년 3월 28일

React

목록 보기

1/2

코드스테이츠에서 프로젝트를 진행하면서 드래그 위치에 맞춰 숫자가 카운드되는 Hook을 사용한 적이 있었는데 그때 처음 Custom Hooks를 접하게 되었다.

Custom Hooks란?

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

언제 사용하나

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

장점

상태관리 로직의 재활용이 가능하다.
클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.
함수형으로 작성하기 때문에 명료하다.

적용

주의사항

1. 커스텀 hook 이름 앞에 use를 꼭 붙인다.
자동적으로 규칙이 맞는지 확인하지 못합니다. 특정 함수에 hook이 호출되는지 알 수 없다.
2. 각 input별로 같은 함수를 이용하지만 같은 state를 공유하는 것이 아니다.
hook은 state적인 특성을 갖고있어서 공유하지 않고 완전히 독립적이다.

src 폴더 > hooks 폴더 생성 후, Custom Hook별로 파일을 추가한다.
함수 이름 앞에 use를 붙인다. ex)useInput.js
보통 프로젝트 내의 hooks 디렉토리에 커스텀 훅을 위치시킨다.
커스텀 훅을 작성할 때는 useState와 같은 React 내장 훅을 사용하여 작성할 수 있다.
보통의 함수와 마찬가지로 사용자가 직접 파라미터와 반환 값을 결정할 수 있다.
Rules of Hooks 규칙들을 준수하다.

Rules of Hooks

최상위에서만 Hook을 호출해야 한다.
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
오직 React 함수 내에서 Hook을 호출해야 한다.
Hook을 일반적인 JavaScript 함수에서 호출하면 안된다.

코드 예시

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;

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;