댓글 내용 수정 중 문제 / inputs 리팩토링 중 질문

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

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

댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 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: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?

안녕하세요! 희주님!

이미 작성한 댓글을 삭제하는 것은 가능하나, 빈문자열("")로 수정하는 방법은 일반적인 웹 서비스에서 허락되지 않는 경우가 대부분이랍니다!
왜냐하면, 등록할 때도 마찬가지로 빈문자열("")의 댓글을 등록하려면 등록이 안되는 것과 동일한 맥락이에요!

그럼에도 불구하고, 이를 가능하게 만들고 싶다면, state를 하나 만들고(ex, const [touch, setTouch] = useState(false)), 댓글의 입력창을 1회 이상 건드렸을 때 해당 state를 true로 변경해 보세요!^^
실제로 비슷한 경우에 많이 사용되는 변수명(touch) 이랍니다!
희주님! 정말 실력이 많이 올라오신 것 같아요!^^
Object.fromEntries 기능을 활용하여 리팩토링 하신 것 깔끔한 방법인 것 같네요!^^

1) 위에서 만든 방법을 import만 하여 재사용 가능하도록 function으로 만들어서 언제든지 불러올 수 있도록 업그레이드도 고려해 볼 수 있을 것 같아요!

2) 만약, form이 너무 복잡해져서 안의 구성 내용을 한눈에 파악(코드가 복잡하고 큰 규모의 프로젝트라면, 코드가 길더라도 가독성 높고 안전한 코드가 더 중요합니다!)할 수 있어야 하는 경우라면,
const initialize = {
// name: "",
// age: "",
// likeCount: 0
// ...
// ...
}
와 같이 초기값을 설정해 주시고, 초기화가 필요할 때 setInputs(initialize) 형태로 사용해 보세요!^^

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