[React] use어쩌구들 깔끔하게 사용하기 #커스텀 훅

💡 Custom Hook

커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. 보통은 `use어쩌구.js` 같은 js파일을 생성하고 그 안에 필요한 로직같은걸 작성한 다음 컴포넌트에서 필요한 데이터만 반환해주는 식이다. 

 

📍 왜 씀?

여러 컴포넌트에서 같은 데이터, 같은 로직이 필요할 때 쓴다. 하나의 파일에서 정의만 해두면 여러 컴포넌트에서 재사용할 수 있다. 그리고 코드가 깔끔해진다(라는 느낌을 받을 수 있다.) 왜 깔끔해지는 느낌을 받냐면 분리해둔 `use어쩌구.js`파일은 한 번 정의해두면 다시 열어 볼 일이 별로 없다. 다시 말해 눈에 안보인다는 뜻이다. 눈에만 안보이면 어쨋든 깔끔해 보일 수 있다. 약간 서랍같은 친구인데 서랍이 닫혀있으면 안의 상태가 어찌 되었건 편안하지 않은가.

 

 

💡 변경 예시

 

📍 일반 훅을 쓴다면 

import { useState } from 'react';

function ComponentA(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);
}

`ComponentA` 에서 아주 간단한 count기능을 만들어 본다고 해봅시다. state와 해당 state를 변경할 수 있는 setter를 정의하고 값을 핸들링하는 함수도 두 개 있네요. `ComponentB` 를 새로 만들었는데 위와 똑같은 기능이 필요해졌어요. 그러면 어떻게 해야 하죠? 

 

정답은 복붙해서 쓰면 됩니다. 틀린 방법이 아니고 가장 쉽고 간편한 방법입니다. 근데 저는 같은 코드가 반복되는게 꼴보기 싫어서 이렇게 변경하겠습니다.

 

📍 변경 예시

커스텀 훅 정의 (useCounter.js)

// useCounter.js
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);

  return { count, increment, decrement };
}
export default useCounter;

1. 필요한 기능을 정의 한다
2. export한다.

끝입니다. 이제 필요한 곳에서 불러다 쓰면 됩니다.

 

 

갖다 쓰기

// ComponentA.jsx
import useCounter from './useCounter';

function ComponentA() {
  const { count, increment, decrement } = useCounter();

  return (/* 어쩌구 저쩌구 */);
}
export default ComponentA;

// ComponentB.jsx
import useCounter from './useCounter';

function ComponentB() {
  const { count, increment, decrement } = useCounter();

  return (/* 어쩌구 저쩌구 저쩌구 얼씨구 */);
}
export default ComponentB;

예 뭐 대충 저렇게 import잘 해주고, 호출 잘 해서 사용하면 됩니다. 

 

그럼 이제 `useCounter`가 필요한 컴포넌트가 10개가 생기더라도 거뜬하겠죠? 100개가 생긴다면 화이팅입니다. 언젠간 되겠죠.