커스텀 Hook

React 커스텀 훅: 재사용 가능한 로직으로 컴포넌트를 효율적으로 관리하는 방법

소개

React 커스텀 훅은 React 컴포넌트에서 자주 사용되는 상태 관리 로직이나 부수 효과를 추출하여 재사용 가능한 함수로 만든 것을 의미합니다. 이를 통해 컴포넌트의 복잡도를 줄이고, 코드의 가독성을 높이며, 유지보수를 용이하게 만들 수 있습니다.

왜 커스텀 훅을 사용해야 할까요?

• 코드 재사용: 여러 컴포넌트에서 공통적으로 사용되는 로직을 한 번만 구현하고 재사용할 수 있습니다.
• 컴포넌트 분리: 컴포넌트의 관심사를 분리하여 각 컴포넌트의 역할을 명확하게 만들 수 있습니다.
• 테스트 용이성: 작은 단위의 함수로 로직을 분리하여 테스트하기 쉽습니다.
• 코드 가독성: 컴포넌트 내부의 로직을 간결하게 만들어 코드를 이해하기 쉽게 합니다.

커스텀 훅 만들기

커스텀 훅은 일반 함수처럼 정의하며, 함수 이름은 use로 시작하는 것이 관례입니다. 커스텀 훅 내부에서는 React의 내장 훅(useState, useEffect 등)을 사용하여 상태를 관리하고 부수 효과를 처리할 수 있습니다.

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

  return { count, increment: () => setCount(count + 1) };
}

 

위 예시는 간단한 카운터를 관리하는 커스텀 훅입니다. useState 훅을 사용하여 count 상태를 관리하고, setCount 함수를 이용하여 count 값을 증가시키는 increment 함수를 반환합니다.

728x90

커스텀 훅 사용하기

커스텀 훅은 다른 컴포넌트에서 일반 함수처럼 호출하여 사용할 수 있습니다.

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

 

커스텀 훅의 활용 예시

• 데이터 fetching: API 호출, 데이터 캐싱 등 데이터 관련 로직을 추출하여 커스텀 훅으로 만들 수 있습니다.
• 폼 관리: 폼 유효성 검사, 입력 값 관리 등 폼 관련 로직을 추출하여 커스텀 훅으로 만들 수 있습니다.
• 애니메이션: 애니메이션 관련 로직을 추출하여 커스텀 훅으로 만들 수 있습니다.
• 커스텀 훅 조합: 여러 커스텀 훅을 조합하여 복잡한 로직을 구현할 수 있습니다.

커스텀 훅의 장점

• 재사용성: 한 번 작성한 커스텀 훅을 여러 컴포넌트에서 재사용하여 개발 생산성을 높일 수 있습니다.
• 유지보수성: 로직이 한 곳에 모여 있으므로 수정이 필요할 때 한 곳에서만 수정하면 됩니다.
• 테스트 용이성: 작은 단위의 함수로 로직을 분리하여 테스트하기 쉽습니다.
• 코드 가독성: 컴포넌트 내부의 로직을 간결하게 만들어 코드를 이해하기 쉽게 합니다.

커스텀 훅의 단점

• 학습 곡선: 커스텀 훅에 대한 이해가 필요하며, 잘못 사용하면 오히려 코드를 복잡하게 만들 수 있습니다.
• 과도한 추상화: 모든 로직을 커스텀 훅으로 만들 필요는 없으며, 적절한 수준에서 커스텀 훅을 사용해야 합니다.

결론

React 커스텀 훅은 React 개발에서 매우 유용한 도구입니다. 커스텀 훅을 잘 활용하면 코드의 재사용성, 유지보수성, 가독성을 높이고, 더 효율적인 개발을 할 수 있습니다. 하지만 커스텀 훅을 남용하지 않도록 주의해야 합니다.

추가적으로 알아두면 좋은 점

• 커스텀 훅의 이름: use로 시작하는 것이 관례이지만, 반드시 지켜야 하는 규칙은 아닙니다.
• 커스텀 훅의 인수: 커스텀 훅은 필요에 따라 다양한 인수를 받을 수 있습니다.
• 커스텀 훅의 반환 값: 커스텀 훅은 상태 값, 함수, 객체 등 다양한 값을 반환할 수 있습니다.
• 커스텀 훅과 useEffect: 커스텀 훅 내부에서 useEffect 훅을 사용하여 부수 효과를 처리할 수 있습니다.