[Node/React] 쇼핑몰 사이트 만들기 - 03 이미지 State를 부모 컴포넌트로 업데이트하기

이미지를 올리면 FileUpload 컴포넌트에 있는
const [Images, setIamges] = usetState([]) 
Images<< 이 부분에 path가 들어있는데 
여기서 문제점이 확인(submit)버튼을 누르면 
이미지 정보가 서버로 가고 DB에 가서 저장 해야 하는데
확인을 눌러도 이미지 정보를 가져 올 수 없다

왜냐하면 이미지 정보는 FileUpload 컴포넌트에 있고
UploadProductPage에는 없기 때문이다
그래서 FileUpload에 있는 정보를 UploadProductPage 
부모컴포넌트에 전달 해줘야 한다   

function FileUpload(props) {
  const [Images, setImages] = useState([]);

  const dropHandler = (files) => {
    let formData = new FormData();
    const config = {
      header: { "content-type": "multipart/fomr-data" },
    };
    formData.append("file", files[0]);

    axios.post("/api/product/image",
    formData, config).then((response) => {
      if (response.data.success) {
        setImages([...Images, 
                   response.data.filePath]);
        props.refreshFunction([...Images, 
                    response.data.filePath]);
      } else {
        alert("파일을 저장하는데 실패했습니다.");
      }
    });
  };

/UploadProductPage.js

  const [Images, setImages] = useState([]);

  const updateImages = (newImages) => {
    setImages(newImages);
  };


  <FileUpload refreshFunction={updateImages} />

/FileUpload.js

  axios.post("/api/product/image", formData, config).then((response) => {
      if (response.data.success) {
        setImages([...Images,
                   response.data.filePath]);
   
        props.refreshFunction([...Images,
				   response.data.filePath]);
      } else {
        alert("파일을 저장하는데 실패했습니다.");
      }
    });
  };