1. 구현하기

진행 상황

• 질문 수정 기능
• 답변 수정 기능
• 사이드바 레이아웃

진행 예정

• 푸터 레이아웃
• 백엔드 서버 완성되면 테스트 해보기

2. TIL

CKEditor5로 수정 기능 구현

기존 상태값 보이게 하기

수정하는 기능은 수정 버튼을 누르면 모달창이 나오고, 모달창 안에는 CKEditor가 있어서 수정할 데이터를 입력하고 수정 버튼을 누르면 patch를 이용하서 데이터를 수정하려고 했다.
우선 데이터를 변경하기 위한 상태를 만들고, 초기값은 get으로 받아온 data를 넣어주었다. 모달창은 다른 컴포넌트로 구현하여 props로 필요한 상태와 상태변화함수, 그리고 post를 위한 data.id를 같이 넘겨 주었다.
CKEditor5의 초기값은 상태로 넘겨준 값과 그리고 onChange 일때 바뀐 값으로 상태 값이 바뀌게 해주었다.
하지만 수정버튼을 눌렀을 때 기존 값이 나타나지 않고 비어있는 상태가 되었다.

 const [newContent, setNewContent] = useState(data.content);
 
  <CKEditor
    editor={ClassicEditor}
    data={newContent}
    onReady={(editor) => {}}
    onChange={(event, editor) => {
      const data = editor.getData();
      setNewContent(data);
    }}
    onBlur={(event, editor) => {}}
    onFocus={(event, editor) => {}}
   />

시도한 방법

콘솔 출력을 이용하여 두 가지를 확인해보았다.
1. 상태값 확인 : 빈 문자열 -> 값 입력하면 상태 값 변경
2. 취소를 누르고 다시 수정 누르면 : 마지막으로 입력한 상태 값 출력

우선 첫 번째 문제는 기존 값이 나타나지 않는 것이다 그리고 새로 발견한 두 번째 문제는 취소를 누르고 다시 수정을 누르면 본문은 기존 값이 나오지만, 텍스트 에디터안에는 때는 수정의 마지막 상태가 들어가 있었다.
출력된 결과를 보니 초기값에 문제가 있다는 것을 알게 되었다. 텍스트 에디터의 onChange는 잘 작동하여 상태가 입력한 값으로 바뀌고 그 값이 텍스트 에디터의 기존 값으로 들어가는 것이었다.
아무래도 처음에 데이터가 빈 문자열이 찍히는 것과 관련이 있어보였다. 최초 렌더링시 상태는 콘솔에서와 같이 빈 값인데 그게 초기값으로 들어가버려서 텍스트 에디터에는 아무런 값도 보이지 않고, 텍스트 에디터를 통해 수정된 값이 상태값으로 들어가버린 것이다.
그렇게 되니 상태는 변화되었고 취소를 누르고 다시 수정을 눌렀을 때 텍스트 에디터의 초기값은 수정된 값이 되는 것이다.

해결 방법

취소를 누르고 다시 수정을 눌렀을 때 텍스트 에디터가 수정된 상태를 기억하지 않아야 하므로 상태의 초기값을 빈 문자열로 두었다.
그리고 텍스트 에디터의 기본값이 필요하니 모달 버튼의 클릭 이벤트 핸들러에 상태변화 함수로 데이터를 넣어주었다.
그렇게 되면 모달 버튼을 눌렀을 때는 렌더링 직후가 아니어서 빈 문자열이 아닌 데이터 값을 그대로 받을 수 있게 된다. 텍스트 에디터에 기존 값이 들어가고 취소를 누르고 다시 수정을 눌렀을 때도 마찬가지로 기존 값이 들어간다.

 const [newContent, setNewContent] = useState('');

 const openEditModalHandler = () => {
      setEditModalOpen(true);
      setNewContent(data.content);
  };