Hook
react에서의 hook은 함수형 컴포넌트에서 제공하는 함수 기능들의 묶음이다. 주로 상태를 관리하도록 도와주는 useState(), 컴포넌트의 렌더링 / 리렌더링과 함께할 작업을 지정해주는 useEffect(), 메모이제이션을 지원하는 useMemo()와 useCallback() 등이 있다. 이외에도 react에서 제공하는 hook은 더욱 다양하게 있다.
규칙
react에서 hook을 사용할 때, 준수해야 하는 몇가지 규칙이 있다. 규칙과 함께 잘못 사용된 예시를 사진을 통해 확인해보자.
- 오직 컴포넌트 내부에서만 사용되어야 한다.
- 컴포넌트의 최상위에서 호출되어야 한다.
- if / for 등의 조건을 사용하면 안된다.
커스텀 훅(custom hook)
react를 개발하다 보면, 대게 hook을 이용하여 state를 관리한다든지, useEffet() 를 활용하여 렌더링을 관리한다든지의 작업을 한다. 이때, 개발자는 동일하게 반복적으로 작동하는 로직을 발견할 수 있다. 이 동일하게 반복되는 hook의 로직들을, 컴포넌트처럼 재사용할 수 있도록 특수한 함수로 추출할 수 있다면? 개발자는 보다 편리하고 유연하게 개발할 수 있을 것이다. 이렇게 재사용할 수 있도록 개발자가 정의한 hook이 바로 커스텀 훅이다. 아래의 예시를 통해 커스텀 훅을 사용할만한 상황을 살펴보자.
const MainPage: FC<{ username: string }> = ({ username }) => {
const [userName, setUserName] = useState<string>(username);
const userCard = `USER CARD - ${userName}`;
useEffect(() => {
console.log(`${userName}님 환영합니다!`);
alert('오늘의 일정을 확인해주세요!');
}, [userName]);
return (
<div>
~~~
</div>
);
};
export default MainPage;
props로 부터 username을 받아와 state의 초기값으로 할당하고, 렌더링 직후 유저에게 인삿말을 건네주는 예제이다. 만약 이 예제가 메인 페이지가 아닌, 마이 페이지, 상점 페이지 등의 여러 페이지에서 똑같이 사용한다고 가정하면, 해당 페이지에 똑같은 hook을 계속 써줘야 한다.
이때, 개발자는 똑같이 사용되는 hook을 컴포넌트처럼 따로 추출하여 다음과 같이 만들 수 있다.
import React, { useEffect, useState } from 'react'
const useUserGreeting = (username: string) => {
const [userName, setUserName] = useState<string>(username);
const userCard = `USER CARD - ${userName}`;
useEffect(() => {
console.log(`${userName}님 환영합니다!`);
alert('오늘의 일정을 확인해주세요!');
}, [userName]);
return [userName, setUserName, userCard];
};
export default useUserGreeting;
단지 MainPage 컴포넌트에서 사용하는 useState()와 useEffect()를 그냥 단순히 한번 더 작성했다고 생각할 수 있지만, 커스텀 훅의 진가는 재사용성에서 나타난다. 앞으로 이 기능을 사용하는 모든 컴포넌트에는 useUserGreeting(username) 이라는 값을 통해 userName 상태와, setUserName, userCard라는 정적인 변수까지 모두 다음의 한줄의 코드로 사용할 수 있다.
const AnotherPage: FC<{ username: string }> = ({ username }) => {
const [userName, setUserName, userCard] = useUserGreeting(username);
return (
<div>
~~~
</div>
);
};
export default AnotherPage;커스텀 훅을 사용하면 해당 로직을 여러 컴포넌트에서 반복 작성하지 않아도 되므로 코드의 중복을 줄이고 유지보수성을 향상시킬 수 있다.
이렇게 사용되는 커스텀훅은 다음과 같은 특징을 갖고 있다.
특징
-
기존의 hook의 규칙을 그대로 준수해야 한다.
맨 위와 같이 작성된 대로, hook은 컴포넌트 내부의 최상위 부분에서만 작성되야 하며, 반복및 조건문을 사용하면 안된다. 이 규칙을 그대로 따른다. -
use- 의 관례를 따른다.
커스텀훅으로 작성되는 모든 훅이 이름은 기존과 비슷하게 use- 로 시작하는 이름을 작성한다. 예를 들어 페이지에 접속할 때 마다 인사를 하는 커스텀 훅의 이름은useUserGreeting()처럼 작성한다. -
독립적으로 운영된다
몇개의 커스텀훅을 여러 컴포넌트에서 호출하든 각각의 커스텀훅은 독립적으로 운영된다. 기능만 같을 뿐, 각각 호출된 커스텀은 서로 다른 별개의 state와useEffect()등의 기능을 갖고 있기 때문에 중복된다는 걱정은 하지 않아도 된다.
커스텀훅은 너무 이른 단계에 로직을 뽑아내려고 하지 않는게 좋다. 코딩하면서, 반복될 것 같으면 그때 작성하는것이 좋다
