setImage 를 사용했을 때, state에 바로 적용이 안되는 이유는 무엇인가요?

Question

안녕하세요. 쉽고 유익한 강의 감사합니다. 강의를 듣다가 궁금한 점이 있어서 질문드립니다.
FileUpload.js에서 setImage 를 사용하여 이미지 state에 이미지를 추가 하였을 때, state에 바로 적용이 안되는 이유가 궁금합니다.
이 질문을 드리는 이유는 FileUpload.js에서 이미지를 업로드 했을 때, 이미지 state에 새로운 이미지를 추가하였는데, 부모 컴포넌트(UploadProductPage.js)에게 그냥 이미지 state만 보내지 않고, 추가된 이미지도 같이 보내는 이유가 궁금했습니다.
즉, FileUpload.js의 submitHandler에서 ''' setImages ([... Images , response . data . filePath ]) ''' 이렇게 해서 이미지 state에 새로 업로드한 이미지를 추가하였으니 부모 컴포넌트에게 state 정보를 보낼 때는 ''' props . refreshFunction ([... Images ]) ''' 이렇게 보내면 될 것 같은데, 이렇게 하지 않고 ''' props . refreshFunction ([... Images , response . data . filePath ]) ''' 이렇게 방금 추가한 이미지도 같이 보내야 되는 이유가 궁금합니다.

조병우 · Answer

setState함수가 비동기적으로 작동하고, 동작속도가 느려서 setImage로 image를 set시켜주기 전에 props.refresh~~함수가 동작되버려요. 그래서 그렇게 하신거 같은데 setState로 state변경하고, 바로 그 변경된 state를 쓰고 싶을때는 useEffect를 이용해서 쓰는 방법도 있어요. 그래서 저 같은 경우는 setImages ([... images ,  response . data . filePath ]); dropHandler에서 이렇게 Image의 state를 변경시켜주고, useEffect (()  =>  {          props . refreshFunction ( images );     }, [ images ]) 이렇게 image의 state가 변경되는 걸 catch하게 해서 보냈습니다. 근데 이렇게 하면 image가 set되고 => useEffect에서 감지 => props의 function호출인데 강사님이 해주신 방법대로하면 set호출 => props의 function호출 => set완료 라 더 빠릅니다. 다만, 하다보니 useEffect로 해야하는 경우가 반드시 생겨서 방법은 알고 계시는게 좋을듯해요