<aside> 📑

</aside>

들어가며

React 기반 커스텀 텍스트 에디터를 구현하면서, 단순 텍스트 입력이 아니라 span 내부 텍스트 구조, 리뷰(highlight) 처리, Enter/Backspace, Undo/Redo를 안정적으로 다루는 방법을 고민했습니다. 특히 contentEditable + React 구조에서 흔히 발생하는 removeChild 에러와 DOM/React 불일치 문제를 해결한 과정을 공유합니다.

1. 초기 구조와 접근

우리 에디터는 기본적으로 아래 구조를 가지고 있습니다.

• contentRef → 실제 <div contentEditable> DOM
• text → React state, 현재 에디터 텍스트
• chunks → buildChunks에서 만들어진 React element 배열, text 상태 기반 렌더링
• processInput → 사용자가 입력한 DOM 내용을 text 상태로 반영

즉 DOM 자체보다 React state(text) 중심으로 에디터 상태를 관리합니다.

이 구조 덕분에 span 구조나 highlight, 리뷰 영역을 안정적으로 관리할 수 있습니다.

2. Enter 기능 구현

문제 없이 동작한 이유

• 에디터는 이미 글이 <span>으로 감싸져 있다고 가정
• Enter 입력 시 기존 span 내부에서 텍스트를 분할하고 줄바꿈 처리하도록 직접 구현
• 줄바꿈 시 span 구조와 highlight 상태를 유지 → 안정적인 재렌더링 가능