댓글 수정하기

프로젝트 진행 중, 댓글을 생성, 삭제, 수정에 대해서 만들게 되었고, 해당 사항을 기록하고 싶어서 글을 쓰게 되었다.

현재 상황

댓글 수정을 하는 도중 발생한 문제, 수정 버튼을 눌렀지만, 수정장소로 커서가 이동이 되지 않는다는 것!

const TestComponet = (commentData: CommentInfo) => {
  const { isOpenModal, handleModal } = useModal(); //커스텀 모달훅 사용
  const [isModifyState, setIsModifyState] = useState(false);
  const [modifyComment, setModifyComment] = useState(commentData.content); //댓글의 내용
  
  //수정할 댓글 불러오기
  const handleInputComment = (e : React.onChange<HTMLInputElement) => {
  	const event = e.target.value;
  }

  //댓글 수정 핸들러
  const handleModifyComment = async () => {
    setIsModifyState(true);
  };
  
  //확인 버튼 핸들러
  const handleDone = async () => {
    setIsModifyState(false);
    await COMMENTS.commetModifyApi(commentData.id, modifyComment);
  };

  return (
    <div>
      {isModifyState ? (
        <div>
          <input
            type="text"
            onChange={handleInputComment}
            value={modifyComment}
            />
          <button onClick={handleDone}>확인</button>
        </div>
      ) : (
        modifyComment
      )}
      <Modal show={isOpenModal} hide={handleModal}>
        <div>
          <S.Option onClick={handleModifyComment}>수정</S.Option>
        </div>
      </Modal>
    </div>
    )
}

export default TestComponent;

커스텀 모달 훅 구현 블로그

생각하기

인터넷을 뒤져보다가 useRef를 이용해서 구현할 수 있다고 해서 해보려고 한다.

const TestComponet = (commentData: CommentInfo) => {
  const { isOpenModal, handleModal } = useModal(); //커스텀 모달훅 사용
  const [isModifyState, setIsModifyState] = useState(false);
  const [modifyComment, setModifyComment] = useState(commentData.content); //댓글의 내용
  const focusOnInput = useRef<HTMLInputElement>(null);
  
  //수정할 댓글 불러오기
  const handleInputComment = (e : React.onChange<HTMLInputElement) => {
  	const event = e.target.value;
  }

  //댓글 수정 핸들러
  const handleModifyComment = async () => {
    if (focusOnInput.current !== null) {
      focusOnInput.current.disabled = false; //input 비활성화 해제
      focusOnInput.current.focus(); //input에 focus
    }
    setIsModifyState(true);
  };
  
  //확인 버튼 핸들러
  const handleDone = async () => {
    setIsModifyState(false);
    await COMMENTS.commetModifyApi(commentData.id, modifyComment);
  };

  return (
    <div>
      {isModifyState ? (
        <div>
          <input
            type="text"
            onChange={handleInputComment}
            value={modifyComment}
            />
          <button onClick={handleDone}>확인</button>
        </div>
      ) : (
        modifyComment
      )}
      <Modal show={isOpenModal} hide={handleModal}>
        <div>
          <S.Option onClick={handleModifyComment}>수정</S.Option>
        </div>
      </Modal>
    </div>
    )
}

export default TestComponent;

처음에는 이런식으로 작성했는데, 계속 에러만 뿜고 실행이 되지 않았다.
nextjs특성상 window객체 접근해서 값을 바꾸면 가상돔과 일치시키지 못하는 hydration이 발생하기 때문에, useEffect를 사용해서 구현해줘야 한다.
이거때문에 삽질을 해따..

해결

const TestComponet = (commentData: CommentInfo) => {
  const { isOpenModal, handleModal } = useModal(); //커스텀 모달훅 사용
  const [isModifyState, setIsModifyState] = useState(false);
  const [modifyComment, setModifyComment] = useState(commentData.content); //댓글의 내용
  const focusOnInput = useRef<HTMLInputElement>(null);
  
  //수정할 댓글 불러오기
  const handleInputComment = (e : React.onChange<HTMLInputElement) => {
  	const event = e.target.value;
  }

  //댓글 수정 핸들러
  const handleModifyComment = async () => {
    setIsModifyState(true);
  };
  
  //수정버튼 클릭 시 input에 focus
  useEffect(() => {
    if (focusOnInput.current !== null) {
      focusOnInput.current.disabled = false; //input 비활성화 해제
      focusOnInput.current.focus(); //input에 focus
    }
  }, [isModifyState]);
  
  //확인 버튼 핸들러
  const handleDone = async () => {
    setIsModifyState(false);
    await COMMENTS.commetModifyApi(commentData.id, modifyComment);
  };

  return (
    <div>
      {isModifyState ? (
        <div>
          <input
            type="text"
            onChange={handleInputComment}
            value={modifyComment}
            />
          <button onClick={handleDone}>확인</button>
        </div>
      ) : (
        modifyComment
      )}
      <Modal show={isOpenModal} hide={handleModal}>
        <div>
          <S.Option onClick={handleModifyComment}>수정</S.Option>
        </div>
      </Modal>
    </div>
    )
}

export default TestComponent;

완료~