현재 리액트 공부를 하고 있다. 다음 프로젝트에서 아마 front 단을 리액트로 할 예정이다.
우선 처음에 할 때는 역시 CRUD 부터 하는 거다. 모든 웹에선 CRUD가 기본이다.
그래서 게시판 글 작성부터 할 예정이다.
사실 이전에 React 공부를 하다 말았었다. 그 때는 웹 공부 한창할 때라 이것저것 건들려봤다. (최근까지 바빠서 공부를 못했지만,,,)
이미 세팅은 다 되어있다.
back단은 spring boot로 되어 있고, DB는 Maria DB를 쓰고 있다.
JPA 대신 마이바티스를 쓰고 있다. JPA는 아직까지 어색하다.
아무튼 게시판 글 작성 목적으로 Editor를 찾다가 React-Quill 이란 걸 알게 됐다.
예전에 할 때 Tosat-UI에서 나온 Editor를 사용했다. 근데 이 친구가 React 18버전에선 호환이 안돼서 17 버전으로 다운그레이드했다가 다른 라이브러리 설치할 때마다 17 버전이라고 콘솔창에서 와랄라 해서 18 업그레이드했다.
그래서 React-Quill 로 바꾼 거다.
바꾼 이유는 에디터를 내맘대로 설정할 수 있다.
툴바, 키보드(단축키), 히스토리, 클립보드, 문법 강조 등 여러 가지 설정을 커스텀해서 알맞게 설정할 수 있다.
1. React-Quill 설치하기
우선 설치부터 해보자.
npm install react-quill
npm install 를 통해 설치하면 된다.
2. React-Quill 적용하기
import React, { forwardRef } from 'react'; // useState 제거, useImperativeHandle, useRef 제거 (현재 사용 안 함)
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// props에서 value와 onChange를 받도록 수정
const QuillEditor = forwardRef(({ value, onChange, ...props }, ref) => {
// 내부 useState 제거
const modules = {
toolbar: [
[{ 'header': [1, 2, 3, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['link', 'image'],
['clean']
],
history: {
delay: 500,
maxStack: 100,
userOnly: true
},
};
// ReactQuill에 부모로부터 받은 value와 onChange를 전달
// ref도 전달 (forwardRef 사용 중이므로)
// 나머지 props도 전달 (...props 사용)
return <ReactQuill
ref={ref}
theme="snow"
style={{height: '400px'}}
modules={modules}
value={value}
onChange={onChange}
{...props} // 다른 props (예: placeholder)도 전달 가능하도록
/>;
});
export default QuillEditor;
어우 뭐 많다
js 로 따로 컴포넌트로 쓸려고 따로 뺐다.
render에서 바로 쓸려면 <ReactQuill /> 이렇게 하면 된다. 근데 우리는 이렇게 안 쓸 거잖아. 알잖아~
modules 통해 아까 말한 toolbar나 히스토리등을 설정할 수 있다.
insert 페이지에서만 아니라 update 페이지에서 editor 쓸 예정이기 때문에 이렇게 컴포넌트로 설정했다.
jsx에 적용해 보자.
3. 화면에 적용하기
import React, { Component } from 'react';
import QuillEditor from '../service/QuillEditor';
class InsBoardComponent extends Component {
constructor(props) {
super(props);
this.state = {
type: '1',
title: '',
author: '',
contents: ''
};
}
...
handleEditorChange = (content) => {
this.setState({ contents: content });
}
...
render() {
...
<QuillEditor value={this.state.contents} onChange={this.handleEditorChange} />
...
}
}export default InsBoardComponent;
위에 코드를 보면 글 작성 내용을 contents라는 변수에 저장할 거다.
그래서 생성자에 contents를 우선 초기화했다.
그런 다음 QuilEditor에 onChange 메소드를 통해 글 작성이 업데이트될 때마다 state를 업데이트시키는 거다. 아주 간단하다.
서버에 저장할 때 위에 있는 state 요소들을 하나의 객체로 묶어 서버에 post로 던지면 된다.
이로써 React-Quill Editor를 사용해봤다.
뭐 두서없이 작성한거라 도움이 될지 모르겠다.
그냥 내가 보려고 쓴거다. 불만 갖지 마라 제발
그럼 안뇽~