Custom Hook
Custom Hook(사용자 정의 Hook)
여러 컴포넌트에서 비슷한 로직을 공유할 경우에는 이를 Custom Hook으로 작성해두면 해당 로직을 손쉽게 재사용할 수 있습니다.
Custom Hook은 보통의 함수처럼 인수로 무엇을 전달 받고 무슨 값을 반환해야 하는지 모든 것을 사용자가 직접 결정할 수 있습니다. 이러한 Custom Hook은 이전 React 컴포넌트에서는 생각하기 힘들었던 로직 공유의 유연성을 제공해 줍니다.
Custom Hook의 이름은 useCount나 useFileStatus 등과 같이 use로 시작하고 뒤이어 대문자로 이어지는 카멜 표기법(camelCase)에 따라 작성하며, 나머지는 Hook이 기본적으로 지켜야 하는 기본 사용 규칙만 지켜서 사용하면 됩니다.
하지만 Custom Hook은 다른 내장 Hook들과는 달리 정의할 때는 몇 가지 사항을 추가로 고려해야 합니다. 만약 이를 고려하지 않고 무분별하게 Hook을 정의하여 사용한다면 예측하지 못한 결과를 얻을 수 있으며, 이를 해결하기 위한 디버깅마저도 힘들 수 있습니다.
다음 예제는 이전 렌더링에서의 값을 기억하여 사용할 수 있도록 useEffect와 useRef를 사용하여 구현한 로직을 usePrevious라는 Custom Hook으로 작성한 예제입니다.
usePrevious.js
import { useEffect, useRef } from "react";
const usePrevious = (value) => {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
export default usePrevious;
App.js
import { useState } from "react";
import usePrevious from "./usePrevious";
const App = () => {
const [number, setState] = useState(0);
const prevNumber = usePrevious(number);
useEffect(() => {
if (number === 1 && prevNumber === 2) {
// ...
}
}, [number]);
// ...
}
export default App;
위의 예제에서 App 컴포넌트는 number의 현재 state 값이 1이고 이전 state 값이 2라면 특정 동작을 수행하게 됩니다. 이전 state 값을 저장하는 로직이 usePrevious라는 Custom Hook으로 추출되어 있기에 App 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 해당 로직을 손쉽게 재사용할 수 있습니다.
클래스 컴포넌트 vs Hook
지금까지 우리는 React에서 제공하는 여러 종류의 Hook에 대해 살펴보았습니다. React에서 Hook을 사용하면 클래스 컴포넌트를 작성하지 않고도 대부분의 기능을 구현할 수 있습니다. 하지만 useState나 useReducer Hook을 사용하는 방식이 기존의 setState를 사용한 방식보다 좋다는 의미는 결코 아닙니다.
React에서는 Hook의 도입과 상관없이 기존의 클래스 컴포넌트를 앞으로도 계속해서 지원할 예정이라고 공지하였습니다. 따라서 클래스 컴포넌트로 구현된 기존의 프로젝트를 억지로 함수 컴포넌트와 Hook을 사용한 형태로 전환할 필요는 없습니다. 단, React에서는 함수 컴포넌트와 Hook의 사용을 권장하고 있습니다.
앞으로 React 애플리케이션을 개발할 때는 함수 컴포넌트의 사용을 가장 먼저 염두에 두고, 꼭 필요한 상황에서는 클래스 컴포넌트의 사용도 같이 고려하는 것을 권장합니다.
