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

김봉섭님의 프로필 이미지

작성한 질문수

웹 게임을 만들며 배우는 React

6-4. useEffect로 업데이트 감지하기

useEffect, useState, 비동기 처리

22.06.23 14:38 작성

·

339

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 값을 사용하면 안 되는 이유 부탁드립니다.. ㅠㅠ

 

 

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2022. 06. 24. 01:22

setState는 비동기입니다. 값을 바꾸더라도 다음줄에 반영되지 않습니다.