Custom Hook을 활용한 스크래핑 기능 구현

06 Nov 2023

reactjs

이번 기술 블로그에서는 React에서 Custom Hook을 활용하여 스크래핑 기능을 구현하는 방법에 대해 알아보겠습니다. 스크래핑은 웹 사이트에서 데이터를 추출하는 작업으로, 정보를 자동으로 수집하고 가공하는 데 사용됩니다. Custom Hook을 사용하면 스크래핑 로직을 재사용할 수 있고, 코드를 더 깔끔하게 유지할 수 있습니다.

Custom Hook 만들기

먼저, useScraping이라는 Custom Hook을 만들어보겠습니다. 이 Hook은 URL을 입력받고 해당 웹 페이지에서 데이터를 스크래핑하는 로직을 포함합니다.

import { useState, useEffect } from 'react';
import axios from 'axios';

const useScraping = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url);
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading };
};

위의 코드에서 useScraping 함수는 url을 인자로 받으며, Axios를 사용하여 해당 URL에서 데이터를 가져옵니다. 데이터를 받아오면 data 상태를 업데이트하고, 로딩 상태를 false로 변경합니다.

Custom Hook 사용하기

이제 useScraping Custom Hook을 사용하여 원하는 웹 페이지에서 데이터를 스크래핑하는 기능을 구현해보겠습니다.

import React from 'react';
import useScraping from './useScraping';

const ScrapingComponent = () => {
  const { data, loading } = useScraping('https://example.com');

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Scraped Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ScrapingComponent;

위의 코드에서 ScrapingComponent는 useScraping Custom Hook을 호출하여 데이터를 가져오고, 로딩 상태에 따라 UI를 렌더링합니다. 데이터를 가져온 후에는 JSON.stringify를 사용하여 가져온 데이터를 문자열로 변환하고 출력합니다.

결론

Custom Hook을 사용하여 React 애플리케이션에서 스크래핑 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 스크래핑 로직을 재사용할 수 있고, 코드를 깔끔하게 유지할 수 있습니다. 이를 통해 데이터 수집 작업을 보다 효율적으로 수행할 수 있습니다.

#React #CustomHook