useEffect, useState, 비동기 처리

Question

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

제로초(조현영) · Answer

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