codestates / codestates/art-ground

[Error Handling Log] axios 요청 후 변경된 데이터 바로 랜더링 적용하기 / 박지영

Open
#178 0 comments 0 reactions 1 assignee Claimed by @devLuenna View on GitHub
Error Handling Log
Dominant language
JavaScript
Stars
7
Forks
9
PR merge metrics
No merged PRs in 30d

Description

### axios 요청 후 변경된 데이터 바로 랜더링 적용하기

- axios 요청 이후 바로바로 데이터 반영되어져야 하는 경우는 아래와 같다.
- 좋아요/좋아요 해제 —> 바로 옆 숫자 카운팅
- 댓글 생성 —> 바로 아래 숫자 카운팅 및 댓글 생성

- setTimeout 비동기 함수를 활용하여 axios POST 요청 후 추가된 데이터 바로 렌더링 하기: 이 에러의 해결방법의 포인트는
- boolean타입의 `rerender`라는 상태값을 의도적으로 하나 생성하여, 새로운 데이터를 생성하는 axios POST나, 데이터를 삭제하는 axios DELETE요청 직후에 그 rerender 상태를 변경시키는 것. 그리고 이 상태값을 렌더를 담당하는 useEffect함수의 의존성 배열로 두었다.
- 그럼에도 불구하고 바로 변경된 사항이 useEffect내 함수(`getAxiosData`)가 호출될 때 반영되지 않는다. 그래서 이 함수가 호출이 되기 전에 0.5초라는 아주 미세한 시간 텀을 줘보았다(setTimeout함수 사용). 그랬더니 그제서야 이전에 POST/DELETE 요청된 변경사항이 바로 반영이 되었다.

![image](https://user-images.githubusercontent.com/83934037/134772370-9a28ef2d-f490-48b6-b968-bd8ed4d514a3.png)

### **에러 핸들링을 위해 참고한 레퍼런스 링크**

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.