Colin's Blog
Custom Hook을 활용한 워드 클라우드 생성

워드 클라우드는 텍스트 데이터에서 가장 빈번하게 등장하는 단어들을 시각적으로 표현하는 방법입니다. 이번 포스트에서는 Custom Hook을 사용하여 간편하게 워드 클라우드를 생성하는 방법을 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수형 컴포넌트에서 상태 관련 로직을 재사용하기 위한 기능입니다. 이를 사용하면 반복적인 로직을 효율적으로 추상화하여 컴포넌트에서 간단하게 활용할 수 있습니다.

워드 클라우드 생성 과정

  1. 텍스트 데이터를 가져옵니다. 이 데이터는 단어들이 포함된 문자열이어야 합니다.

  2. 가져온 텍스트 데이터를 단어 단위로 분리합니다. 이를 위해 split 함수를 사용하면 됩니다.

  3. 각 단어의 등장 빈도를 계산합니다. 이를 위해 객체를 사용하여 단어를 키(key)로, 등장 횟수를 값(value)로 관리합니다.

  4. 등장 빈도에 따라 단어를 크기와 색상으로 변환합니다. 등장 횟수가 많을수록 크기가 커지고, 색상이 진해집니다.

  5. 변환된 단어를 워드 클라우드로 시각화합니다. 이를 위해 d3.js 또는 chart.js와 같은 데이터 시각화 라이브러리를 사용할 수 있습니다.

Custom Hook 구현하기

다음은 워드 클라우드 생성을 위한 Custom Hook의 예시입니다.

import { useState, useEffect } from 'react';

function useWordCloud(text) {
  const [wordFrequencies, setWordFrequencies] = useState(null);

  useEffect(() => {
    if (text) {
      const words = text.split(' ');
      const frequencies = {};
      
      words.forEach((word) => {
        frequencies[word] = frequencies[word] + 1 || 1;
      });
      
      setWordFrequencies(frequencies);
    }
  }, [text]);

  return wordFrequencies;
}

export default useWordCloud;

위의 코드에서는 useWordCloud라는 Custom Hook을 정의하고 있습니다. text라는 매개변수를 받아와서 등장 빈도를 계산한 후, wordFrequencies라는 상태 값으로 저장합니다. text의 값이 바뀔 때마다 useEffect를 통해 등장 빈도를 업데이트합니다.

워드 클라우드 컴포넌트에서 Custom Hook 사용하기

아래는 워드 클라우드 컴포넌트에서 Custom Hook을 사용하는 예시입니다.


import useWordCloud from './useWordCloud';

function WordCloudContainer({ text }) {
  const wordFrequencies = useWordCloud(text);

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

  return (
    <div>
      {Object.keys(wordFrequencies).map((word) => (
        <span
          key={word}
          style={{
            fontSize: `${wordFrequencies[word] * 10}px`,
            color: `rgba(0, 0, 0, ${wordFrequencies[word] / 10})`,
          }}
        >
          {word}{' '}
        </span>
      ))}
    </div>
  );
}

export default WordCloudContainer;

위의 코드에서는 useWordCloud Custom Hook을 WordCloudContainer 컴포넌트에서 사용하고 있습니다. wordFrequencies 값을 받아와서 각 단어를 크기와 색상으로 변환하여 출력합니다. 너비는 등장 횟수에 따라 결정되며, 색상의 투명도 역시 등장 횟수에 비례하여 결정됩니다.

이제 WordCloudContainer 컴포넌트를 원하는 곳에서 사용하여 워드 클라우드를 생성할 수 있습니다.

마무리

위의 예시 코드를 참고하여 Custom Hook을 활용하여 워드 클라우드를 생성해보았습니다. 이러한 방식을 활용하면 단순한 로직을 재사용하여 효율적으로 코드를 작성할 수 있습니다. 워드 클라우드 외에도 다양한 경우에 Custom Hook을 사용하여 코드의 재사용성을 높일 수 있습니다.

더 자세한 내용을 알고 싶다면 공식 React 문서를 참고하시기 바랍니다.

#react #custom-hook

© 2018 Colin. All rights reserved.