Draft.js는 텍스트 에디터를 구현하는 데 사용되는 강력하고 유연한 라이브러리입니다. 이 라이브러리를 사용하여 텍스트 에디터를 구현하는 경우, 사용자가 작성한 내용을 자동으로 저장하는 기능을 구현할 수 있습니다. 이 기능을 구현하기 위해서는 Draft.js의 EditorState 객체를 사용하고, 브라우저의 LocalStorage를 활용하면 됩니다.
1. EditorState 객체 사용하기
Draft.js에서 사용자가 입력한 내용을 관리하는 객체는 EditorState입니다. 이 객체는 텍스트 입력, 선택 영역 관리 등의 기능을 제공합니다. 우선, 저장할 텍스트 에디터의 상태를 관리하기 위해 EditorState 객체를 생성해야 합니다.
import { Editor, EditorState } from 'draft-js';
import React, { useState } from 'react';
function MyEditor() {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const handleChange = (newState) => {
setEditorState(newState);
};
return (
<Editor
editorState={editorState}
onChange={handleChange}
/>
);
}
2. 자동 저장 기능 추가하기
자동 저장 기능을 추가하기 위해서는 EditorState 객체에 변화가 있을 때마다 저장하는 함수를 작성해야 합니다. 이 함수는 onChange 이벤트 핸들러에 등록되어야 합니다.
function MyEditor() {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const handleChange = (newState) => {
setEditorState(newState);
saveContent(newState);
};
const saveContent = (currentState) => {
const content = currentState.getCurrentContent().getPlainText();
localStorage.setItem('editorContent', content);
};
return (
<Editor
editorState={editorState}
onChange={handleChange}
/>
);
}
위 코드에서 saveContent 함수는 EditorState 객체에서 현재 텍스트 내용을 가져와 localStorage에 저장합니다. 이를 통해 사용자가 작성한 내용이 브라우저의 LocalStorage에 저장되어 자동으로 복구될 수 있습니다.
3. 복구 기능 추가하기
페이지가 새로 고침되거나 다시 열리는 경우, 이전에 작성한 텍스트를 복구할 수 있어야 합니다. 이를 위해 localStorage에 저장된 내용을 EditorState 객체에 적용하는 함수를 작성해야 합니다.
function MyEditor() {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const handleChange = (newState) => {
setEditorState(newState);
saveContent(newState);
};
const saveContent = (currentState) => {
const content = currentState.getCurrentContent().getPlainText();
localStorage.setItem('editorContent', content);
};
useEffect(() => {
const storedContent = localStorage.getItem('editorContent');
if (storedContent) {
const contentState = ContentState.createFromText(storedContent);
setEditorState(EditorState.createWithContent(contentState));
}
}, []);
return (
<Editor
editorState={editorState}
onChange={handleChange}
/>
);
}
위 코드에서 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 localStorage에서 이전에 저장한 내용을 가져와 EditorState 객체로 만듭니다. 이렇게 하면 사용자가 이전에 작성한 내용을 복구할 수 있습니다.