codestates / codestates/EmotiPop

[✏️ Error-Handling] useEffect 관련 에러

Open
#117 0 comments 1 reaction 0 assignees View on GitHub
error-handling front-end
Dominant language
JavaScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### **어떤 에러인가요?**

- useEffect 관련 에러

### **에러 메시지**

```js
Warning: An effect function must not return anything besides a function, which is used for clean-up.%s%s,
It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// ...
}
fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

```
### **에러 핸들링 방법**

useEffect 함수 안에서 비동기 함수를 생성 하지 말고 함수 스코프 밖에서 비동기 함수를 정의해 준 뒤

useEffec 함수 안에서는 호출만 해줬다.

```js
// 원래 코드
useEffect(async () => {
await Font.loadAsync({
"UhBeeJJIBBABBA": require('../../../assets/fonts/UhBeeJJIBBABBA.ttf'),
"UhBeeJJIBBABBABold": require('../../../assets/fonts/UhBeeJJIBBABBABold.ttf'),
});
setIsReady(true);
}, []);
```

```js
// 수정된 코드
const reqFont = async() => {
return await Font.loadAsync({
"UhBeeJJIBBABBA": require('../../../assets/fonts/UhBeeJJIBBABBA.ttf'),
"UhBeeJJIBBABBABold": require('../../../assets/fonts/UhBeeJJIBBABBABold.ttf'),
});
}

useEffect(() => {
reqFont()
setIsReady(true);
}, []);
```

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.