[React]Custom Hook

우리는 함수형 컴포넌트에서의 생태와 생명주기 관련 기능을 사용하기 위해서 hook을 사용한다

 

useState나 useEffect 등이 대표적인데

우리가 api와 통신할 때마다 이런 훅들을 사용하면 

코드가 길어지고 가독성도 떨어지고 같거나 비슷한 로직이 반복되어 작성이 됩니다

 

이러한 과정을 줄이기 위해 커스텀 훅을 사용한다

---

Custom Hook

 

커스텀 훅(Custom Hook)은 React에서 기존 훅(Hook)들의

기능을 조합하거나 확장하여 반복적으로

사용할 수 있는 코드를 모듈화 한 기능입니다

 

쉽게 말해, 컴포넌트 로직을 재사용하기 위해 사용하는 함수이다

---

왜 사용할까?

위에서 설명한 것처럼 

반복되는 로직을 줄이기 위해서 사용한다

 

여기서 반복되는 로직이란 

1. api데이터 가져오기
2. 윈도우 크기감지
3. 페이지 스크롤 추적
4. 로컬 스토리지 관리

등등이 있습니다

어떻게 사용할까

커스텀 훅을 구성하는 단계는 아래의 5개로 이루어져 있습니다

1. 함수로 작성
2. 기본적인 훅사용
3. 입력값
4. 값 반환
5. side effect 처리

1. 함수로 작성

우리가 흔히 말하는 function을 사용해서 함수로 선언하는 게 가장 첫 번째 단계입니다

function useCustomHook(){
	//함수 선언
}

 

여기서 차이점이 나오는데 무조건 커스텀훅을 선언할 때는 use를 앞에다가 붙여야 합니다

 

React의 훅 규칙에 따라 React는 훅이  컴포넌트의 최상위에서만 호출되도록 규칙을 가지고 있습니다.

 

훅을 조건문이나 반복문 안에서 호출하면 의도치 않은 동작이 발생할 수 있는데, use로 시작하는 함수는 React가 훅으로 인식해서 이러한 규칙이 적용이 됩니다. 

 

use를 사용하지 않으면 오류가 발생할 수 도 있다는 말이지요.

 

2. 기본적인 훅 사용

우리가 평소에 사용하던 useState, useEffect, useRef 등등 기본적인 훅을 사용할 수 있습니다

function useCustomHook(){
    const [scroll, setScroll] = useState(null);
    
    useEffect(() => {
    	
    }, []);
    
    return scroll;
}

 

3. 입력값(매개변수)

필요에 따라 커스텀 훅에 매개변수를 받아올 수 있습니다

function useCustomHook(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
}

위코드는 url을 매개변수로 받아오고

 

useState와 useEffect를 통해 url의 값을 받아서 반환해 주는 코드입니다

 

4. 값 반환하기

커스텀 훅은 호출한 컴포넌트에서 사용할 값을 반환합니다

 

반환할 값은 상태, 함수, 또는 객체다양하게 반환할 수 있습니다

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

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

// 커스텀 훅 사용 예시
const { count, increment } = useCustomHook();

위 코드는 count와 count를 증가시키는 increment함수를 반환하는 커스텀 훅입니다

 

우리는 예시와 같이 우리가 사용할 컴포넌트에서 count, 와 increment를 사용할 수 있습니다

 

5. side Effect 처리

컴포넌트가 언마운트될 때 중요한 점은 리소스 정리를 해야 합니다.

예를 들어, 컴포넌트가 언마운트된 후에도 남아 있는 이벤트 리스너나 타이머 같은 비동기 작업이 계속 실행되면 메모리 누수가 발생할 수 있습니다.

이를 방지하기 위해 언마운트 시 정리 작업이 필요합니다

 

보통 useEffect의 return을 통해서 정리합니다

const useTimer = () => {
  const [seconds, setSeconds] = useState(0);  
  const [hasEnded, setHasEnded] = useState(false);  

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => {
        if (prevSeconds >= 59) {
          clearInterval(intervalId);
          setHasEnded(true); 
          return 60; 
        }
        return prevSeconds + 1;
      });
    }, 1000);

    return () => clearInterval(intervalId);  // 언마운트 시 타이머 정리
  }, []);

  return { seconds, hasEnded }; 
};

 

위 코드는 60초가 되면 끝나는 타이머인데 

return () => clearInterval(intervalid); 부분으로 타이머를 정리합니다

 

결론

커스텀훅은 반복되는 코드를 줄이고 재사용성을 높인다는 장점 말고도

로직과 컴포넌트를 분리할 수 있다는 장점 또한 가지고 있습니다

 

이처럼 장점이 많기 때문에 꼭 공부해 보고 사용해봤으면 합니다