[React] 서버와 클라이언트 데이터 불일치 트러블슈팅💫

발생한 문제 🤦‍♀️

댓글을 작성할 때 클라이언트의 상태가 즉시 업데이트되지 않아서 페이지를 새로고침해야만 댓글이 반영되는 문제가 발생하였다.

const handleCommentSubmit = async (commentContent) => {
  try {
    const newComment = await createComment(id, { content: commentContent });
    setComments((prevComments) => [...prevComments, newComment]);
  } catch (error) {
    alert("댓글 작성 중 오류가 발생했습니다.");
  }
};

문제 원인 🤷‍♀️

문제의 원인은 클라이언트 상태와 서버 상태 간의 불일치이다. 클라이언트는 서버의 응답을 기다리지 않고 상태를 업데이트하기 때문에, 서버에서 최신 댓글 목록을 가져오기 전까지는 클라이언트 상태와 서버 상태가 다를 수 있다.

해결 방안 💁‍♀️

서버와 클라이언트 간의 데이터 불일치를 방지하는 두 가지 방법을 소개하겠다!

서버에서 최신 댓글 목록 불러오기

클라이언트 상태를 직접 업데이트하는 대신, 서버에서 최신 댓글 목록을 다시 가져와 클라이언트 상태를 업데이트하는 방법이다.

const handleCommentSubmit = async (commentContent) => {
  try {
    await createComment(id, { content: commentContent });
    const commentsData = await fetchComments(id);
    setComments(commentsData);
  } catch (error) {
    alert("댓글 작성 중 오류가 발생했습니다.");
  }
};

Optimistic UI

Optimistic UI를 사용하면 사용자가 댓글을 추가했을 때, 서버의 응답을 기다리지 않고 클라이언트 측에서 먼저 댓글을 업데이트하여 UX를 향상시킬 수 있다. 서버의 응답이 성공적이지 않을 경우에 롤백 처리할 수 있다.

const handleCommentSubmit = async (commentContent) => {
  const optimisticComment = {
    id: Date.now(), //  임시 ID 생성
    content: commentContent,
    // 기타 필요한 필드들
  };

  setComments((prevComments) => [...prevComments, optimisticComment]);

  try {
    const newComment = await createComment(id, { content: commentContent });
    // 서버 응답으로 받은 실제 ID로 업데이트
    setComments((prevComments) =>
      prevComments.map((comment) =>
        comment.id === optimisticComment.id ? newComment : comment
      )
    );
  } catch (error) {
    // 실패 시 댓글 롤백
    setComments((prevComments) =>
      prevComments.filter((comment) => comment.id !== optimisticComment.id)
    );
    alert("댓글 작성 중 오류가 발생했습니다.");
  }
};