[오픈마인드] API 호출 시 새로고침 안되게 적용

 

이슈 : API에서 delete 메서드를 사용했을 때, 새로고침 해야만 데이터가 삭제 되는것을 볼 수 있었음.

 

해결 :

`window.location.reload(true)` 쓰면 새로고침 되면서 데이터가 삭제된 것을 볼 수 있지만, 스크롤이 맨위로 올라가버리는 문제가 생긴다.

 

데이터를 삭제 했을 때 서버에서는 데이터가 삭제가 된 상태다. 그러므로 filter메서드를 이용해서 해당하는 값을 없애주고 클라이언트에 삭제한 것을 표시해주자.

 

const deleteQuestion = async questionId => {
    const response = await fetch(`${API_BASE_URL}/questions/${questionId}/`, {
      method: 'DELETE',
    });

    if (response.ok) {
      setQuestions(prevQuestions =>
        prevQuestions.filter(prevQuestion => prevQuestion.id !== question.id),
      );
      setQuestionCount(prevCount => prevCount - 1);
    } else if (!response.ok) {
      throw new Error('질문 삭제 실패했습니다');
    }

 

서버에 해당 아이템을 삭제 요청 시키고, 해당 id 부분은 필터를 이용해서 클라이언트에 안보이게 렌더링 해주었다.

 

 

 

검색어 : delete method reload

 

참고링크 :
https://stackoverflow.com/questions/70948507/reactj-s-item-deleted-only-after-refresh-delete-method