22.04.14- TIL

오늘 한 일

프로젝트 댓글 수정, 삭제 기능 구현 완료

 

배운점 및 느낀 점

오늘 댓글 수정, 삭제 기능을 구현하는데 있어서 삭제기능은 삭제 버튼을 눌렀을 때 단순히 삭제 api가 호출 되면 되므로 구현하는데 어려움은 없지만 수정 기능을 구현하는데 있어서는 수정 버튼을 눌렀을 때 수정하기 전 기존 댓글 텍스트가 나와야하고 기존 텍스트에서 추가적으로 글을 쓰거나 삭제하거나 해야해서

수정 버튼을 눌렀을 때에도 기존 텍스트를 유지하는게 어려웠다.

 

이를 구현하기 위해 어떻게 하면 좋을까 고민을 하다가 내 프로젝트는 리덕스 스토어에서 댓글 state를 가져오는데 그것을 usestate로 textarea onChange 이벤트에 사용 될 state를 새롭게 만들어서 

state의 기본값에 넣어주고 댓글 수정창의 textarea의 기본 value로 넣어서 onChange 이벤트시에 기존 댓글 텍스트가 수정되도록 구현하였다.

// 댓글 수정을 위해 기존 댓글의 텍스트를 초기값으로 넣어줌
  const [commetText, setCommentText] = useState(text);
  
  const onChange = (event) => {
    const value = event.target.value;
    setCommentText(value);
  };
  
  <Content
    value={commetText}
    ref={textRef}
    onInput={autoSize}
    onChange={onChange}
    required
    onClick={autoSize}
   />

.