codestates / codestates/art-ground
[Error Handling Log] axios 요청 후 변경된 데이터 바로 랜더링 적용하기 / 박지영
- 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 요청된 변경사항이 바로 반영이 되었다.

### **에러 핸들링을 위해 참고한 레퍼런스 링크**
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.