리액트의 훅(Hooks) 도입은 클래스를 작성하지 않고도 상태 및 기타 리액트 기능을 사용할 수 있는 더 간결하고 강력한 방법을 제공하며, 컴포넌트 작성 방식을 혁신적으로 변화시켰습니다. 이 중에서도 커스텀 훅은 코드 재사용과 더 나은 조직을 위한 강력한 도구로 두각을 나타냅니다. 이 글에서는 재사용 가능한 로직을 캡슐화하기 위해 리액트에서 커스텀 훅을 만드는 방법을 살펴보겠습니다.
커스텀 훅이란?
커스텀 훅은 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있게 해줍니다. 커스텀 훅은 “use”로 시작하는 이름을 가진 자바스크립트 함수로, 다른 훅을 호출할 수도 있습니다.
간단한 커스텀 훅 만들기
useWindowSize라는 간단한 훅을 만들어 창 크기를 얻어보겠습니다:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import { useState, useEffect } from ‘react’;
function useWindowSize() {
const [size, setSize] = useState([window.innerWidth, window.innerHeight]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener(‘resize’, handleResize);
return () => window.removeEventListener(‘resize’, handleResize);
}, []);
return size;
}
|
cs |
이 훅은 어떤 컴포넌트에서도 현재 창 크기를 얻는 데 사용할 수 있습니다.
커스텀 훅을 사용하는 이유
- 재사용성: 컴포넌트 간에 상태 관련 로직을 캡슐화하고 재사용합니다.
- 간결성: 로직을 더 작고 재사용 가능한 함수로 분리하여 복잡한 컴포넌트를 단순화합니다.
- 관심사의 분리: 로직을 UI에서 분리하여 코드를 더 유지보수하기 쉽게 만듭니다.
커스텀 훅을 만들 때의 모범 사례
- 훅의 이름은
use로 시작해야 합니다. - 리액트의 훅 규칙을 따르세요.
- 훅이 충분히 일반적이어서 재사용 가능하도록 합니다.
리액트에서 커스텀 훅은 코드를 더 깔끔하고 유지보수하기 쉽고 재사용 가능하게 작성하는 데 훌륭한 방법입니다. 개발자들은 컴포넌트 로직을 재사용 가능한 함수로 추상화함으로써 리액트 애플리케이션을 더 효율적이고 우아하게 만들 수 있습니다.