게시글 상세 페이지에서 새로고침 시 투표 참여 여부 값이 초기화되는 문제 해결

PostDetail.jsx

게시글 상세 페이지에서 투표에 참여한 직후에는 투표에 참여한 화면으로 바로 렌더링 되는데 새로고침을 하면 투표참여 state 값이 초기화되어 중복 투표가 가능해지는 문제가 발생했습니다. (이전 페이지로 나갔다가 다시 해당 게시글 상세 페이지로 돌아오면 투표에 참여한 화면으로 잘 렌더링 됨)

투표에 참여했는데도 새로고침 시 중복투표가 가능해지는 화면

문제 발생 원인

 useEffect(() => {
    fetchData();
    checkVoteJoin();
  }, []);

useEffect hook을 사용하여 화면이 렌더링 될 때 마다 fetchData 함수로 게시글에 대한 데이터를 저장한 다음 그 데이터로 유저가 투표에 참여했는지 확인할 수 있는 checkVoteJoin 함수를 실행하여 참여 여부에 따라 다른 투표 화면을 렌더링 하도록 구현했습니다.

의존성 배열을 비워두었기 때문에 useEffect는 화면이 렌더링되었을 때 한 번만 실행되는데, 새로고침 시 fetchData 함수와 checkVoteJoin 함수가 순차적으로 실행되지 않아서 checkVoteJoin 함수가 투표 참여 여부를 정확하게 조회하지 못하는 문제가 생긴 것이라고 생각했습니다.

해결 방법

useEffect 에서 함수들을 비동기로 호출하여 순서대로 실행되도록 수정
의존성 배열에 postId, user 값을 추가하여 페이지를 렌더링할 때만이 아닌 postId와 user값이 변경될 때 마다 실행되도록 수정

  useEffect(() => {
    const initialize = async () => {
      await fetchData(); // fetchData가 완료된 후
      await checkVoteJoin(); // checkVoteJoin을 호출
    };
    initialize();
  }, [postId, user]);

devcisive / solumon-frontend

게시글 상세 페이지에서 새로고침 시 투표 참여 여부 값이 초기화되는 문제 해결 #106