비동기적 통신

[wnsdudSoftkim]

비동기적 통신

useEffect, async await for axios

useEffect 에는 3가지 방법이 있다 . 첫번째로 그림과 같이 useEffect 두번째 인자로 빈 배열을 넣었을땐 처음 렌더링 될 때만 실행(Component Mount)

두번 째로 인자에 아무것도 안넣었을 시 리 렌더링 될 때마다 실행 (component Update)

세번 째로 인자에 특정 값을 넣었을 시 특정 값 변경 시에만 실행된다.

useEffect Hook 안에 get 함수를 async await 를 이용하여 axios를 비동기 처리하였다.

왼쪽 창 console 을 보면 showPost. js 34 번째줄 이 먼저 시행되고 return 값이 다 불린 다음에야 24번째 줄이 시행되었다.

이에 통신이 완료되지 않았을 시에는 Loading 화면을 띄우고 완료될 시 데이터 받은 것을 띄우는 작업이 필요