Custom Hooks이란
커스텀 훅이란 재사용 가능한 로직을 갖는 함수입니다.
다른 일반 함수들과 달리 커스텀 훅 "내부에서는 리액트 훅을 사용"할 수 있습니다. 이전에 훅 규칙에서 살펴본 것 처럼 리액트 내장 훅은 "함수형 컴포넌트"와 "커스텀 훅" 내부에서만 사용이 가능합니다.
즉, 여러 컴포넌트에서 사용되는 공통 로직을 커스텀 훅으로 작성한 뒤 컴포넌트들은 커스텀 훅을 호출하여 사용할 수 있습니다. 이때 커스텀 훅은 useState나 useEffect 같은 리액트 훅을 내부에 포함할 수 있습니다.
커스텀 훅 내부에 작성된 리액트 훅은 각 컴포넌트 별로 "독립적"으로 동작합니다.
예를 들어, 커스텀 훅 내부 useState 훅은 커스텀 훅을 호출하는 컴포넌트별로 독립적으로 상태를 추가하며 커스텀 훅을 사용하는 다른 컴포넌트와는 서로 영향을 주고받지 않습니다.
즉, 각 컴포넌트들은 커스텀 훅의 로직만을 공유하며 실제 상태는 공유하지 않습니다. 컴포넌트 별로 커스텀 훅의 모든 동작은 컴포넌트 독립적으로 동작하며 다른 컴포넌트에게는 영향을 주지 않습니다.
Custom Hooks 사용하기
-
일반적으로 커스텀 훅은 커스텀 훅을 위한 독립적인 파일을 생성하여 파일 내 정의하고, 컴포넌트 파일에서 import 하여 사용합니다.
-
커스텀 훅 정의시 이름 앞에는 반드시 "use"를 작성해야 합니다. "use"를 작성해야 리액트가 커스텀 훅을 훅으로 인식하여 훅 규칙을 적용하게 됩니다.
-
커스텀 훅 내 공통적이지 않은 부분은 각 컴포넌트에서 커스텀 훅 호출할 때 인수로 특정 값을 전달하는 방법을 사용할 수 있습니다. 인수로는 어떠한 값도 전달 가능합니다.
-
컴포넌트에게 노출하기 위한 값들은 커스텀 훅 반환값으로 작성해주어야 합니다. 커스텀 훅의 반환값은 어떤 값이든 작성 가능합니다.
정의한 커스텀 훅은 리액트 훅처럼 사용합니다. 그리고 커스텀 훅 내부에서 사용되는 리액트 훅은 커스텀 훅을 사용하고 있는 컴포넌트에 묶이게 됩니다.
즉, 커스텀 훅을 여러 컴포넌트에서 사용하더라도 각 컴포넌트들은 커스텀 훅의 "논리만을 공유"하며, "실제 동작은 독립적"으로 이루어지며 다른 컴포넌트에게 영향을 주지 않습니다.
// use-counter.js
import { useState } from 'react';
const useCounter = () => {
const [count, setCount] = useState(0);
return [count, setCount];
}
export default useCounter;useCounter이라는 커스텀 훅 내부에서는 useState 훅을 사용하여 상태를 추가하는 로직을 포함하고 있습니다.
만약 useCounter 훅을 여러 다른 컴포넌트 내 사용할 때 상태값은 컴포넌트 별로 독립적으로 추가되며, 각 상태값은 다른 컴포넌트에게도 영향을 주지 않습니다.
// AComponent.js
import useCounter from '../hooks/use-counter.js;
const AComponent = () => {
const [countA, setCountA] = useCounter();
,,,
};
// BComponent.js
import useCounter from '../hooks/use-counter.js';
const BComponent = () => {
const [countB, setCountB] = useCounter();
,,,,
};AComponent와 BComponent 둘 다 useCounter 훅을 호출하여 상태를 등록하고 있습니다. 만약 setCountA 상태 변경 함수를 호출하더라도 BComponent는 영향을 받지 않으며 그 반대도 동일합니다.
즉, 등록된 상태는 컴포넌트 독립적으로 등록되며 서로 영향을 주지 않습니다.
