[React] 리액트로 게시판 만들기. Quill 을 이용한 텍스트 에디터 블로그 게시판

안녕하세요. 오늘은 리액트에서 게시판 만들때 사용하기 좋은

텍스트 에디터 라이브러리를 알려드릴건데요.

Quill을 사용하면 편하게 세팅해서 사용할 수있어요.

react에서 다양한 라이브러리를 제공해서 편한 거같아요.

먼저 비주얼스튜디오의 터미널에

 

 

npm i quill

 

을 해서 quill 라이브러리를 다운받아줘요.

 

그 다음

원하는 컴포넌트에  quill을 import 해줘요.

import Quill from 'quill';
import 'quill/dist/quill.snow.css'

몇가지 테마가 있는데

저는 snow를 사용했어요. 개인적으로 이게 보기좋고 제일 예쁜거같아요.

 

const quillElement = useRef(null);
    const quillInstance = useRef(null);
    useEffect(()=>{
        quillInstance.current = new Quill(quillElement.current,{
            theme: 'snow',
            placeholder: '내용을 입력하세요.',
            modules: {
                toolbar: [
                    [{header:['1', '2', '3' ,false]}],
                    ['bold','italic', 'underline', 'strike'],
                    [{list:'ordered'},{list: 'bullet'}],
                    ['blockquote', 'code-block','link','image','video'],
                    [{'align':[]},{'color':[]},{'background':[]},{'font':[]}]
                ]
            }
        })
        const quill = quillInstance.current;
        quill.on('text-change',(delta,oldDelta,source) =>{
            if(source==='user'){
                change_field('body', quill.root.innerHTML);//body
            }
        })
    },[change_field]);

그리고 위와같이 선언해주고 설정을 해줘요.

 

 

마지막으로

<QuillDiv>
            <div ref={quillElement}/>
</QuillDiv>

return 문 안에 이렇게

적어주면 게시글을 적을 수 있는 에디터가 생길거에요.

 

오늘은 이렇게 react 에서 quill을 이용해

게시판 게시글을 만드는 법을 공유해드렸어요.ㅎㅎ

이걸 사용해서 블로그도 제작할 수 있어요.