useEffect, useState, 비동기 처리

useEffect(() => {
if (isFoucused) {
async function load() {
try {
const rawData: any = await AsyncStorage.getItem('data');
const savedData = JSON.parse(rawData);
setData(savedData);
} catch (e) {
console.log('data load error');
}
try {
const newObject = data
.filter(oneData => oneData.type == 'blank')
.map(oneData => ({
key: oneData.key,
value: '',
}));
setBlankDescription(newObject);
} catch (e) {
console.log('BlankDescription load error');
}
}
load();
}
}, [isFoucused]);

이와 같은 방법으로 비동기를 처리하려 하면 이때 data는 setData가 정의되기 전의 값이 나옵니다.

useState 값이 useEffect 내부에 있는 함수가 다 실행이 끝난뒤에 해당 값이 바뀌기 때문인가요?

useEffect(() => {
if (isFoucused) {
async function load() {
try {
const rawData: any = await AsyncStorage.getItem('data');
const savedData = JSON.parse(rawData);
setData(savedData);
 //이 부분이 문맥상 분리시켜줘야 깔끔할 것 같아서
 //해당 부분을 다른 try구문으로 빼려고 했지만,
 //원활한 비동기 처리를 위해선 savedData를 바로 사용해줘야한다.
const newObject = savedData
.filter(oneData => oneData.type == 'blank')
.map(oneData => ({
key: oneData.key,
value: '',
}));
setBlankDescription(newObject);
} catch (e) {
console.log('data load error');
}
}
load();
}
}, [isFoucused]);

위 처럼 savedData를 바로 사용해주면 원하는 대로 비동기 처리가 잘 진행 되었습니다. 이렇게 하지 않고

useState값을 변경해준 뒤에 그 useState 값을 사용하면 안 되는 이유 부탁드립니다.. ㅠㅠ

인프런 커뮤니티 질문&답변