글쓰기 기능 주석화

import React, { useState, useEffect, useRef } from "react";
import styles from "./boarder.module.css";
import ReactHtmlParser from "html-react-parser";
// editor로 들어올 html요소 파싱
export default function MyEditor() {
  const editorRef = useRef();	// useref정의
  const [editorLoaded, setEditorLoaded] = useState(false);	//에디터 로드여부
  const { CKEditor, ClassicEditor } = editorRef.current || {};		//useRef가 바라보고있는 dom 접근

  const [boardContent, setBoardContent] = useState({
    title: "",	// editor에 들어갈 제목란
    content: "", 	// editor에 들어갈 내용란
  });
  const [viewContent, setViewContent] = useState([]);
	// content 담을 배열
  useEffect(() => {
    editorRef.current = {
      // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
    setEditorLoaded(true);	// 에디터 실행
  }, []);
	// 에디터 로딩완료
  const getValue = (e) => {
    const { name, value } = e.target;	//dom선택
    setBoardContent({
      ...boardContent,		// 원래 값 복사
      [name]: value,		// boardContent 의 내용을 복사해서 그 안에 name이라는 이름의 키의 값을 value로 바꿔 저장한다는 의미
    });
    console.log(boardContent);
  };

  return editorLoaded ? (
    <div>
      <div className="center">
        <h1 className={styles.ct}>Contents Review</h1>
        <div className={styles.movie_container}>
          {viewContent.map((e, i) => (
            <div key={i}>	// map함수 인자 i는 고유키를 가									져야함
              <h2>{e.title}</h2>
              <div>{ReactHtmlParser(e.content)}</div>
            </div>		
                    // reacthtmlparser를 통해 내용을 파싱
          ))}
          ;
        </div>
      </div>
      <CKEditor
        editor={ClassicEditor}
        data={CKEditor.data}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
          setBoardContent({ ...boardContent, content: data });	// 원본 복사후, content에 editor의 data삽입
          console.log(boardContent);
        }}
      />
      <button
        className={styles.submit_button}
        onClick={() => {
          setViewContent(viewContent.concat({ ...boardContent }));
        }}
      >
        입력
      </button>
    </div>
  ) : (
    <div>Editor loading</div>
  );
}

최적화가 필요한 이유

1. 실제 서비스에 도입되면 수정해야 할 상황이 많을텐데
   그때마다 코드를 보면서 다시 공부할 시간이 없음.
2. 가독성, 실제 코드 기능에 방해되면 제거해야
3. 리소스 낭비를 줄이기 위해
4. 팀원과의 원활한 협업을 위해

아직 내 수준이 못미쳐서 최적화할 단계는 아닌듯함