[javascript] Draft.js를 사용한 텍스트 에디터의 이모지(이모티콘) 삽입 기능 구현하기

24 Nov 2023

javascript

이모지(이모티콘)는 텍스트 에디터에서 사용자들이 감정이나 표현을 좀 더 생동감 있게 전달할 수 있는 중요한 요소입니다. 이번 블로그 포스트에서는 Draft.js와 함께 이모지 삽입 기능을 구현하는 방법에 대해 알아보겠습니다.

Draft.js란?

Draft.js는 페이스북에서 개발한 오픈 소스 리액트 기반 텍스트 에디터입니다. Draft.js를 사용하면 일반적인 텍스트 에디터에 비해 더욱 유연하고 확장 가능한 에디터를 구축할 수 있습니다.

이모지 라이브러리 선택하기

이모지를 삽입하는 기능을 구현하기 위해서는 적합한 이모지 라이브러리를 선택해야 합니다. 여기서는 react-emoji-picker 라이브러리를 사용하도록 하겠습니다.

import React, { useState } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";
import EmojiPicker from "react-emoji-picker";

const EmojiEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);

  const handleEmojiSelected = (emoji) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEmoji = contentState.createEntity(
      "emoji",
      "IMMUTABLE",
      { emoji: emoji }
    );
    const entityKey = contentStateWithEmoji.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(editorState, {
      currentContent: contentStateWithEmoji
    });
    setEditorState(
      RichUtils.toggleLink(
        newEditorState,
        newEditorState.getSelection(),
        entityKey
      )
    );
    setShowEmojiPicker(false);
  };

  return (
    <div>
      <button onClick={() => setShowEmojiPicker(true)}>이모지</button>
      {showEmojiPicker && <EmojiPicker onEmojiSelected={handleEmojiSelected} />}
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
};

export default EmojiEditor;

구현 방법

필요한 package를 설치하기 위해 터미널에서 아래의 명령어를 실행합니다.

npm install draft-js react-dom react react-emoji-picker

위의 예시 코드를 참고하여 EmojiEditor.js 파일에 코드를 작성합니다.
필요한 컴포넌트를 import합니다.

import React, { useState } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";
import EmojiPicker from "react-emoji-picker";

EmojiEditor 컴포넌트를 작성합니다.

const EmojiEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  
  // 이모지 선택 시 처리하는 함수
  const handleEmojiSelected = (emoji) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEmoji = contentState.createEntity(
      "emoji",
      "IMMUTABLE",
      { emoji: emoji }
    );
    const entityKey = contentStateWithEmoji.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(editorState, {
      currentContent: contentStateWithEmoji
    });
    setEditorState(
      RichUtils.toggleLink(
        newEditorState,
        newEditorState.getSelection(),
        entityKey
      )
    );
    setShowEmojiPicker(false);
  };

  return (
    <div>
      <button onClick={() => setShowEmojiPicker(true)}>이모지</button>
      {showEmojiPicker && <EmojiPicker onEmojiSelected={handleEmojiSelected} />}
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
};

EmojiEditor 컴포넌트를 export합니다.

export default EmojiEditor;

제작한 컴포넌트를 사용하는 곳에서 EmojiEditor를 import하여 사용하면 됩니다.

import React from "react";
import EmojiEditor from "./EmojiEditor";

const App = () => {
  return (
    <div>
      <h1>텍스트 에디터</h1>
      <EmojiEditor />
    </div>
  );
};

export default App;

이제 코드를 실행하고 텍스트 에디터에서 “이모지” 버튼을 클릭하면 이모지 피커가 나타나고, 이모지를 선택하면 텍스트 에디터에 해당 이모지가 삽입되는 것을 확인할 수 있습니다.

마치며

이번에는 Draft.js와 react-emoji-picker를 사용하여 텍스트 에디터에 이모지를 삽입하는 기능을 구현하는 방법에 대해 알아보았습니다. 이모지를 삽입하는 기능은 사용자 경험을 향상시키고 더욱 생동감 있게 커뮤니케이션을 할 수 있도록 도와줍니다.

더 자세한 내용은 다음의 링크를 참고해주세요: