-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
useEffect, useState, 비동기 처리
22.06.23 14:38 작성 조회수 261
0
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 값을 사용하면 안 되는 이유 부탁드립니다.. ㅠㅠ
답변을 작성해보세요.
0
답변 1