[React] axios를 사용할때 동기, 비동기 주의하기

axios 라이브러리를 사용하면서 겪은 몇가지 에러 문제입니다.

 

1. useEffect( )에서는 async 사용 불가

useEffect( ) 안에서는 async를 사용할 수가 없더군요.. 그래서 따로 함수를 분리해 선언해주고 그 함수를 useEffect에 넣어주었습니다.

 

2. axios를 사용할때 비동기임으로 데이터가 필요하다면 await 사용하기
사실 1번 문제가 2번 때문에 일어났는데요.

 

다음 예시를 보며 설명드리겠습니다.

let a= 'a'

axios.get('요청')
.then((res)=> { 
console.log(res.data.a)
a = res.data.a //res.data.a 는 'b'라고 가정하자
})

console.log(a)

이렇게 되면 콘솔에는 어떻게 찍힐까요?  b가 두번 찍힐것 같지만 아닙니다.

'b'가 찍히고 'a'가 찍힙니다.

사실 비동기 적인거라 당연한 결과지만 코드를 짤땐 간과하고 짜서 찾는라 좀 걸렸습니다...

앞으로 동기, 비동기를 잘 체크할 수 있게 될 것 같네요.

 

아무튼 그래서 async await 를 쓰려 했는데 이럴수가 useEffect에서는 안되더라고요? 그래서 1번을 알게 되었습니다.

(근데 사실 then 안에서 처리하면 되긴 합니다.)