[react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ② 입력 기능 구현

2020/10/30 - [프로그래밍/react] - [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스

 

인터페이스 개발은 위 포스팅 내용을 참고하면 된다.

 

 

완성된 프로젝트 소스코드

github.com/esyeon88/simple-react-board

esyeon88/simple-react-board

 

소스코드 다운받아서 해보기

 

2020/10/31 - [프로그래밍/backend] - [github] 프로젝트 소스코드 다운받아서 사용하기

[github] 프로젝트 소스코드 다운받아서 사용하기

 

 

<사이트 예시>

 

사이트 예시

 

 

 

 

---

 

 

 

 

 

지난번 포스팅에서 다음과 같은 모양의 간단한 게시판을 만들었다.

 

ckeditor 적용 모습

 

 

이제 이 게시판에 실제로 기능을 구현해보려고한다.

 

useState 입력한 내용 얻기

 

이제 useState 를 이용해 입력한 내용을 state에 저장하는 과정을 진행해본다.

코드에 아래와 같은 내용을 입력한다.

 

import {useState} from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

function App() {
  const [movieContent, setMovieContent] = useState({
    title: '',
    content: ''
  })
  return (
  
  ....

 

 

input 작업

 

 

이제 인풋의 내용이 변할때 그 값을 스테이트에 업데이트 해 주는 기능을 넣어 보도록 하자.

 

먼저 인풋에 적히는 내용을 캐치해야한다.

 

다음과 같은 함수를 하나 만들어준다.

의미는 이벤트가 발생하면 그 이벤트의 name과 value를 가지고 오는 내용이다.

 

const getValue = e => {
	const { name, value } = e.target;
    console.log(name, value);
};

 

use state

 

 

 

그리고 나서 title 인풋을 다음과 같이 변경해준다.

 

<input className="title-input"
	type='text'
    placeholder='제목'
    onChange={getValue}
    name='title'
/>

 

 

그리고나서 사이트로 돌아가 제목칸에 내용을 입력해본다.

아래와 같이 title에 내용을 입력할 때 마다 콘솔에 내용이 확인된다.

 

name은 title, value는 타이핑 하는 글씨가 입력된다.

이제 이렇게 적히는 내용을 가지고 state의 내용을 변경해주면 된다.

 

인풋 설정

 

 

 

getValue 함수의 내용을 다음과 같이 수정해준다.

 

const getValue = e => {
    const { name, value } = e.target;
    setMovieContent({
      ...movieContent,
      [name]: value
    })
    console.log(movieContent);
  };

 

의미는 movieContent 의 내용을 복사해서 그 안에 name이라는 이름의 키의 값을 value로 바꿔 저장한다는 의미이다.

 

리액트에서는 값을 직접 수정하면 안되기때문에 다음과 같이 복사해서 수정하는 방식을 이용한다.

 

2020/10/11 - [프로그래밍/JavaScript] - [JavaScript] 자바스크립트 문법 :: 구조 분해 할당

[JavaScript] 자바스크립트 문법 :: 구조 분해 할당

...movieContent 문법이 이해가 안된다면 위의 내용을 참고해본다.

 

 

그리고 나서 다시 게시판 제목에 글을 입력해본다.

아래와 같이 movieContent 스테이트 내용이 바뀐 것을 볼 수 있다.

 

state 적용

 

 

이번에는 에디터의 내용을 수정해보자.

 

에디터는 위와같이 하기보다 원래 에디터에서 제공하는 기능을 이용해서 값을 수정해본다.

 

먼저 게시판으로 가서 내용을 입력해본다.

 

게시판 data 적용

 

 

에디터에서는 기본적으로 저렇게 입력되는 값을 data 라는 곳에 저장해준다.

 

그럼 우리는 저 data 값을 가져다가 그 내용으로 state 값을 변경해 주면 된다.

 

에디터 컴포턴트의 onChange 안의 내용을 다음과 같이 수정한다.

 

 

onChange={(event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            setMovieContent({
              ...movieContent,
              content: data
            })
            console.log(movieContent);
          }}

 

 

그리고 게시판으로 돌아가서 제목과 내용에 각각 입력을 해본다.

다음과 같이 콘솔창에 제목과 내용이 잘 입력되는 것을 볼 수 있다.

 

내용에 태그가 같이 입력되는 것은 이 에디터 자체가 저렇게 내용을 태그 자체로 저장해주기 때문이다.

그래서 내용을 저장해서 보여주면 입력하는 내용이 그대로 보여지게 된다.

 

 

 

state 적용

 

 

 

 

입력을 누르면 내용 업데이트

 

이번엔 이렇게 스테이트에 저장된 내용을 화면에 보여줄 차례이다.

 

새로운 state를 하나 만들어준다 . 이 스테이트에는 각각 적힌 내용들을 저장해 줄 것이다.

 

use state

 

 

그리고 입력 버튼을 누르면 빈 배열안에 내용을 추가해 주는 기능을 넣어본다.

내용을 보면, 버튼을 눌렀을 때 viewContent라는 배열 안에 movieContent라는 객체를 복사해서 concat 해준다음 그 내용으로 변경 해주는 내용이다.

 

push 함수는 원본 배열을 변화시키기 때문에 아래와 같이 concat을 사용해준다.

 

배열 다루기

 

아래 내용을 참고하면 좋다.

 

 

2020/10/05 - [프로그래밍/JavaScript] - [JavaScript] 배열의 요소 추가 push() vs concat() 차이점

[JavaScript] 배열의 요소 추가 push() vs concat() 차이점

 

 

 

그리고 이렇게 버튼을 눌렀을 때 새로운 내용을 map 함수를 이용해 추가시켜준다.

 

새로운 내용 추가

 

 

 

그리고 나서 다시한번 게시판에 내용을 추가해본다.

그럼 아래와 같이 영화 제목과 내용이 표시되는 것을 볼 수 있다.

 

 

적용된 모습

 

 

근데 본문의 내용에 위와같이 태그가 포함되어 있다.

우리가 원하는 것은 태그 없이 태그의 내용을 html 안에 포함시키고 싶기 때문에 그 과정을 해본다.

 

먼저 모듈을 하나 설치해줘야 한다.

 

다음 모듈을 설치해준다.

 

$ yarn add node-html-parser

 

 

그리고 app.js에 임포트 해준다.

그리고 본문의 내용을 ReactHtmlParser 를 통해 변경해주고 게시판에 글을 다시 작성해본다.

 

react html parser 설치

 

 

 

조금 어설프긴 하지만 그래도 꽤나 멋진 게시판이 완성되었다.

 

 

리액트 게시판 만들기

 

 

 

여기까지는 프론트엔드에서 작동하는 간단한 게시판을 만들어 봤다.

 

문제는 이렇게 작성한 정보가 새로고침하면 다 사라져버린다는 것이다.

 

그래서 다음 포스팅에서는 이렇게 작성한 정보들을 서버쪽 db에 저장하고 그 내용을 불러오는 과정을 진행해보겠다.