해시태그(hashtag) 기능 구현에 대하여

해시태그 기능 구현하는 방법을 작성한 글입니다.

SNS에서 해시태그는 꼭 필요한 기능으로 요구되곤 합니다. 사용자들 간의 상호작용을 유발할 수도 있고, 트렌드 및 마케팅적 요소로도 사용할 수 있기 때문입니다.

이번에 재직중인 기업에서 해시태그를 구현할 기회가 생겨, 간단한 예제를 통해 어떤 식으로 구현하면 될지 알아보도록 하겠습니다.

해시태그 구현 예제

1. 해시태그 컴포넌트 생성: 해시태그를 표시하기 위한 React 컴포넌트를 생성합니다.

# hashtag.js

import React from 'react';

const Hashtag = ({ tag }) => {
  return <span>#{tag}</span>;
};

1. 해시태그 사용: 컴포넌트를 사용하여 해시태그를 표시합니다.

# App.js
import React from 'react';
import Hashtag from './Hashtag';

const App = () => {
  const hashtags = ['react', 'javascript', 'webdevelopment'];

  return (
    <div>
      <h1>해시태그</h1>
      {hashtags.map((tag, index) => (
        <Hashtag key={index} tag={tag} />
      ))}
    </div>
  );
};

export default App;

위 예제는 Hashtag 컴포넌트를 만들어 해시태그를 표시하고, ‘App’ 컴포넌트에서 ‘hashtags’ 배열에 저장된 해시태그를 매핑하여 화면에 표시합니다. ‘key’ prop은 React에서 컴포넌트 리스트를 렌더링할 때 필요한 고유 식별자로 사용했습니다.

다음은 서버에서 해시태그를 구현하기 위해 어떤 식으로 설계되어야 하는가에 대해 알아보겠습니다.