setImage 를 사용했을 때, state에 바로 적용이 안되는... - 인프런

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

이미지 State을 부모 컴포넌트로 업데이트하기[삭제 예정]

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

작성

452

안녕하세요. 쉽고 유익한 강의 감사합니다.

강의를 듣다가 궁금한 점이 있어서 질문드립니다.

<br />

FileUpload.js에서 setImage 를 사용하여 이미지 state에 이미지를 추가 하였을 때, state에 바로 적용이 안되는 이유가 궁금합니다.

<br />

이 질문을 드리는 이유는 FileUpload.js에서 이미지를 업로드 했을 때, 이미지 state에 새로운 이미지를 추가하였는데,

부모 컴포넌트(UploadProductPage.js)에게 그냥 이미지 state만 보내지 않고, 추가된 이미지도 같이 보내는 이유가 궁금했습니다.

<br />

즉,

FileUpload.js의 submitHandler에서

'''

setImages([...Images, response.data.filePath])

'''

이렇게 해서 이미지 state에 새로 업로드한 이미지를 추가하였으니

부모 컴포넌트에게 state 정보를 보낼 때는

'''

props.refreshFunction([...Images])

'''

이렇게 보내면 될 것 같은데, 이렇게 하지 않고

'''

props.refreshFunction([...Images, response.data.filePath])

'''

이렇게 방금 추가한 이미지도 같이 보내야 되는 이유가 궁금합니다.

답변 1

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로 해야하는 경우가 반드시 생겨서 방법은 알고 계시는게 좋을듯해요

질문자

답변 감사합니다!

동기화 문제 때문이군요. 궁금했던게 해소되었습니다.

useEffect 를 이용해서 state를 업데이트 하는 방법도 유용하게 잘 사용하겠습니다.

감사합니다!