인프런 커뮤니티 질문&답변

안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요

첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요

댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요

value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" }

수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요

아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요

두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요

// BoardCommentWrite.container.tsx
// ...
  const onClickWrite = async (): Promise<void> => {
  // ...
  
    // setWriter("");
    // setPassword("");
    // setContents("");

    setInputs(
      (prev) =>
        Object.fromEntries(
          Object.keys(prev).map((key) => [key, ""]),
        ) as typeof prev,
    );
  // ...
}

댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요
위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요...

사실
setInputs({ writer: "", password: "", contents: "" })
그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요

이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?