UseEffect에서 비동기 호출을...
useEffect는 다들 알다시피 컴포넌트가 렌더링 이후 실행을 하는 훅(Hook)이다.
하나의 함수와, 의존성 배열을 같이 전달받아 처리를 하는데,
보통은 이 안에서 렌더링 이후의 값 처리 등을 사용한다.
근데 가끔 이 안에서 비동기 함수를 호출해야 할 때가 있다.
나의 경우 마와셀에서 와인의 국가코드를 가져오는 부분을 만들 때 사용했었다.
당시 UI 테스트를 위해 급하게 사용한 거라 지금은 다른 방식으로 구현되어 있지만...
와인의 생산 국가의 코드를 가져오는 함수는 아래와 같이 구현되어 있다.
async function getCountryCode(countryName: string) {
const response = await fetch("https://restcountries.com/v3.1/all")
const countries = await response.json()
const country = countries.find(
(c: any) => c.name.common.toLowerCase() === countryName.toLowerCase()
)
return country ? country.cca2.toLowerCase() : "Unknown country code"
}그리고 이를 useState의 함수에 set 해주는데, 처음엔 아래와 같이 구현해보려 했다.
useEffect(async () => {
const code = await getCountryCode(props.country)
setCountryCode(code)
}, [props.country])이렇게 해서 되면 모두가 행복했겠지만, 호락호락하지 않다.
저 useEffect를 보면 정리 함수(()=>{})만 반환이 된다.
즉 Promise<> 이거는 반환이 불가능하다는 이야기다.
그럼 어떻게 해결을 해야 할까?
Result
뭐 특이한 방법은 아니다.
그냥 useEffect 내부에서 비동기 함수를 만들어 주고, 그것을 호출하는 형태로 가면 된다.
코드를 보면 바로 이해가 될 것이다.
useEffect(() => {
const fetchCountryCode: any = async () => {
const code = await getCountryCode(props.country)
setCountryCode(code)
}
fetchCountryCode()
}, [props.country])이렇게 처리하면 useEffect 내부에서 비동기 함수를 호출 처리할 수 있다.