이번 포스트에서는 Draft.js 라이브러리로 구현된 에디터를 이용하여 공유하기 기능을 구현하는 방법에 대해 알아보겠습니다.
공유하기 기능의 구현 방법
일반적으로 공유하기 기능은 사용자가 특정 내용을 작성하고, 해당 내용을 다른 사람과 공유하고 싶을 때 사용됩니다. Draft.js는 리액트 기반의 에디터 라이브러리로, 텍스트를 편집하고 스타일을 적용할 수 있는 다양한 기능을 제공합니다.
1. 에디터 컴포넌트 생성하기
먼저, Draft.js를 사용하여 텍스트를 입력하고 편집할 수 있는 에디터 컴포넌트를 생성해야 합니다. 아래는 예시로 작성된 에디터 컴포넌트입니다.
import React, { useState, useRef } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
const MyEditor = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const editorRef = useRef(null);
const handleKeyCommand = (command) => {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
setEditorState(newState);
return 'handled';
}
return 'not-handled';
}
const handleShare = () => {
// 에디터 내용 공유하기 구현
const contentState = editorState.getCurrentContent();
const rawContent = JSON.stringify(convertToRaw(contentState));
// 공유하기 기능을 위해 rawContent를 다른 곳에 전송 또는 저장
console.log("공유할 내용:", rawContent);
}
return (
<div>
<div>
<button onClick={() => setEditorState(RichUtils.toggleBlockType(editorState, 'header-one'))}>
헤더 1
</button>
<button onClick={() => setEditorState(RichUtils.toggleBlockType(editorState, 'header-two'))}>
헤더 2
</button>
</div>
<div onClick={() => editorRef.current.focus()}>
<Editor
editorState={editorState}
onChange={setEditorState}
handleKeyCommand={handleKeyCommand}
ref={editorRef}
/>
</div>
<button onClick={handleShare}>
공유하기
</button>
</div>
);
}
export default MyEditor;
위 예시 코드에서는 Draft.js의 Editor 컴포넌트를 사용하여 에디터를 생성하고, 헤더 스타일을 적용하는 버튼을 추가하여 텍스트 스타일을 변경할 수 있도록 구현했습니다. 또한, handleShare 함수를 통해 에디터 내용을 공유할 수 있도록 구현했습니다.
2. 에디터 내용 공유하기
handleShare 함수에서는 editorState의 내용을 JSON 형식으로 변환한 뒤, 이를 다른 곳으로 전송하거나 저장하는 로직을 추가해야 합니다.
위 예시 코드에서는 공유하기 버튼 클릭 시, editorState의 내용을 JSON 형식으로 변환한 후 console.log로 출력하도록 구현하였습니다. 이 곳에 실제로 공유하기 기능을 구현하는 로직을 작성하면 됩니다. 예를 들어, 서버에 전송하거나 로컬 스토리지에 저장할 수 있습니다.
마무리
위에서는 Draft.js를 이용하여 공유하기 기능을 구현하는 방법을 알아보았습니다. 구체적인 공유하기 기능의 구현은 개발자의 필요에 따라 다양하게 변형될 수 있습니다. 이를 참고하여 실제 프로젝트에 적용해 보시기 바랍니다.