TIL

20230108 TIL 리액트 에디터 라이브러리 비교하기

jiwoosmile 2023. 1. 8. 22:33

https://scriptverse.academy/img/tutorials/reactjs-quill.png

아직은 그냥 input태그로 작성해두었지만, 

질문 글 작성과 답변 글 작성 시 input혹은 textarea 태그만으로는

원하는 내용을 충분히 표현하기 힘들 것 같아서 에디터로 교체하려는 계획을 세웠다.

 

그런데 리액트에서 사용할 수 있는 에디터가 꽤 많고,

여러 툴 중에 장단점을 비교해서 적절한 도구를 찾아내는 것이 개발자의 덕목 중 하나이기 때문에

리액트 에디터 라이브러리의 장단점을 비교해서 나의 프로젝트에 적합한 라이브러리를 찾아보고자 한다.

 

리액트 에디터 라이브러리에는 CKEditor, Quill, TinyMCE등이 있다.

앞 기수 선배분 중 CKEditor를 사용하신 분이 계시고,

짝꿍님께서는 Quill을 사용하신다고 하셔서 그 둘을 먼저 검토해보았다.

CKEditor가 Quill보다는 더 많은 기능을 지원한다고 한다.

하지만 한글이 깨지는 등의 문제가 간혹 발생하는 것 같다.

 

TinyMCE는 Quill보다 많고 CKEditor보다는 적은 기능을 제공한다. 

적용 난이도는 Quill < TinyMCE < CKEditor 순이라고 한다.

 

도구를 선택할 때는 도구의 기능뿐만 아니라 커뮤니티 크기도 고려해야한다고 생각한다.

왜냐하면 문제 상황이 발생했을 때 해결하기가 훨씬 수월하기 때문이다.

 

내 프로젝트에 Quill이 제공하는 기능만으로도 충분하고, 

한글 관련 문제도 적고 커뮤니티도 TinyMCE보다 Quill이 훨씬 크기 때문에 Quill을 사용하기로 최종 결정을 하게 되었다.

 

도구의 장단점을 비교하고 정하는 것이 쉽지 않았지만 장단점을 비교하니 내 결정에 근거를 댈 수 있었다.

앞으로도 어떤 방식을 결정할 때 항상 근거를 갖고 결정을 하는 연습을 해야겠다.