로그는 소프트웨어 개발과 유지보수에 있어서 매우 중요한 역할을 합니다. 로그는 코드 실행 중에 발생하는 정보를 기록하고 디버깅, 모니터링, 오류 추적 등 다양한 목적으로 사용됩니다. 이번 기사에서는 React 애플리케이션에서 Custom Hook을 사용하여 간단한 로깅 기능을 추가하는 방법을 살펴보겠습니다.

Custom Hook 작성하기

먼저, 로깅을 위한 Custom Hook을 작성해야 합니다. 이 Custom Hook은 특정 이벤트가 발생했을 때 해당 이벤트와 관련된 정보를 로그로 남기는 역할을 수행합니다.

import { useEffect } from 'react';

export const useLogger = (event, data) => {
  useEffect(() => {
    console.log(`[${event}] - ${JSON.stringify(data)}`);
  }, [event, data]);
};

위의 코드에서 useLogger라는 Custom Hook은 event와 data라는 두 개의 매개변수를 받습니다. useEffect 훅을 사용하여 event나 data 값이 변경될 때마다 로그를 출력합니다.

Custom Hook 사용하기

Custom Hook을 작성했으니, 이제 이를 사용하여 로깅 기능을 추가할 컴포넌트에서 해당 훅을 호출하면 됩니다. 예를 들어, 버튼이 클릭되었을 때 클릭 이벤트와 관련된 정보를 로그로 남기고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

import React from 'react';
import { useLogger } from './useLogger';

const MyComponent = () => {
  const handleButtonClick = () => {
    // 버튼 클릭 로직
  };

  useLogger('buttonClicked', { timestamp: new Date() });

  return (
    <div>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
};

export default MyComponent;

useLogger 훅을 호출한 후, 버튼이 클릭되었을 때마다 로그가 출력됩니다. useLogger 훅은 buttonClicked라는 이벤트와 현재 시간 정보를 로그로 남깁니다.

결론

Custom Hook을 사용하여 로깅 기능을 간단히 추가할 수 있습니다. 이를 활용하면 애플리케이션의 다양한 이벤트와 상태를 쉽게 추적하고 디버깅할 수 있습니다. 로깅은 개발 시간을 절약하고 애플리케이션의 안정성을 향상시키는데 도움이 되는 강력한 도구입니다.

#logging #react