FileUpload.js에서. UploadProductPage로 데이터 전송시에

안녕하세요 개인 프로젝트를 진행중이다가 살짝 어려운 부분에 있어서 해결하려고 구글링도 해보고 했는데 해결이 되지 않아서 문의드려봅니다. 강의 내용과도 연관된거라 괜찮을듯해서요.

지금 강의에선 FileUpload에서 실제 사진전송을 서버로 요청하고, 서버에서 요청을 완료하면 response로 이미지 정보를 반환한 후 이것을 다시 Parent인 UploadProductPage에 해당 파일의 path 정보를 반환해서 이것을 Parent에서 디스플레이하는 형식인데, 전 썸네일을 추가했습니다.

결과적으로 FileUpload에서 서버로부터 받아서 Parent 컴포넌드로 전송해주는 정보가 2가지로 imagePath와 thumbnailPath이렇게 입니다. 따라서 Parent로 전송하는 것이 단순한 string 데이터가 아니고 variables 객체 안에 image: Images / thumbnail: Thumbnails 이렇게 2개 항목을 state로 정의해주고 있는데요. 문제는 이렇게 전송할시 Parent에서 처음 읽을시에 제대로 값을 읽지 못한다는 점입니다. 처음을 제외하면 그 다음부턴 undefined가 아니라 제대로 값을 읽어오는데요. 이것이 요청처리로 인한 delay 때문인지 정확히 모르겠습니다. 따라서 image값을 Images state가 아닌 직접 response.data.imagePath로 정의해주면 처음부터 이상없이 값을 읽어오지만 아무래도 variable의 관리상 state으로 정의해주는게 좋을듯해서요.

혹시 delay 때문인가 해서 방법을 알아보니 새로 useTransition이란 훅이 있던데 이건 리액트18부터 적용되는 거라 아직 불안해서 17에서 해결할 방법을 고민중입니다

코드를 직접 넣은게 아니라 헥깔리실 수도 있는데 거의 동일한 코드라 괜찮으실꺼 같아요. 이 부분만 다시 적으면, 

 Axios.post('/api/gallery/upload/image', formData, config).then(response => {
            if (response.data.success) {
                setImages(response.data.filePath);
                setThumbnails(response.data.thumbnailPath);
                let variables = {
                    image: Images,
                    thumbnail: Thumbnails
                }
                props.refreshFunction(variables);
            } else {
                alert('Failed to save images on the server');
            }
        });

처음에는 Thumbnail 생성을 따로 Axios 안의 Axios로 추가로 서버에 요청해서 처리해줬었는데 굳이 각각 따로 요청할 필요가 있을까 하는 생각도 들고, 그냥 서버에서 직접 썸네일이미지를 생성하주고 그 정보를 받아왔는데요, 이때 오류생기면 또 그에 따른 오류메세지만 전송하면 될듯해서 이렇게 했는데 바로 variables을 정상적으로 update하는데 문제가 있는듯합니다.

정확한 답이 아니더라도 해결책이 될 수 있는 조언이라도 해주실 수 있나요?

감사합니다