🧾 개요
에디터 개발 프로젝트를 진행하면서, 어떤 방법으로 Input을 구현해야 할 지 정해야 했습니다. 그에 따라, 정리한 내용을 공유해보고자 합니다.
https://github.com/boostcampwm-2022/web32-bmNotion
🧐 고려사항
고려했던 상황들은 다음과 같습니다.
1. 여러 줄의 입력이 가능한가
블록 단위의 에디터로 프로젝트를 기획했기 때문에, 한 블록에 여러줄의 입력이 필수적이라고 생각했습니다.
2. HTML 요소 수정이 가능한가
불필요한 리렌더링을 줄이기 위해 비제어 컴포넌트로 에디터를 구현하기로 했습니다. 그렇기 때문에 직접적으로 HTML을 수정할 수 있다면 효율적일 것이라고 판단하였습니다.
3. 클립보드를 지원하는가
각 블록의 타입에 이미지가 있고, 이를 붙여넣기로도 구현을 하기로 설계했기 때문에 클립보드가 지원된다면 더욱 용이할 것이라고 판단했습니다.
🚩 결론
contenteditable을 사용하기로 했습니다.
여러 줄의 입력
기본적으로 Enter 입력시 개행이 발생합니다.
HTML의 수정
value로 값이 관리되는 것이 아니기 때문에 입력시에 html의 수정이 발생합니다.
클립보드 지원
클립보드를 지원하기 때문에, 이미지 붙여넣기가 가능할 뿐만 아니라 텍스트를 붙여넣는 경우에도 스타일이 유지됩니다.
✔ 요약
Input
- 한 줄씩만 작성 가능함
- 타입 종류가 다양함
- Enter 입력시 submit
- html 요소 수정이 불가능함
- 클립보드 지원 X
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Textarea
- 여러 줄 작성 가능
- Enter 입력시 줄 바꿈 일어남
- html 요소 수정이 불가능함
- 클립보드 지원 X
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Contenteditable
- 여러 줄 작성 가능
- Enter 입력시 줄 바꿈 일어남
- html 요소 수정이 가능함
- 클립보드를 지원함
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
