이미지 업로드 최적화에 대해 고민이 있습니다.

Question

안녕하세요! 이미지 업로드 최적화에 대해서 질문이 있습니다. (수정하기 부분)최적화 진행전에는 상품 수정페이지에서 useEffect를 사용해서 이미지 주소를 가져온다음 state에 저장한 후 props로 전달하여 작성했던 이미지를 보여주고 있었습니다.하지만 최적화에서는 미리보기 주소를 사용해서 보여주고 있어서 미리보기 주소를 넘기고 싶은데 fetchUseditem에서는 images를 File[]이 아니라 String[]으로 받아오고 있어서 미리보기 주소를 어떻게 만들어서 전달해야 할지 고민입니다...수정하기 페이지 접속시 state값이 초기화되어서 이 값을 어떻게 유지해야할지 모르겠습니다. 현재 이미지 버튼 컴포넌트에서는 onChangeFileUrls함수에 file과 미리보기 주소 , 해당 인덱스를 전달하고 있습니다.onChangeFileUrls함수에서 state에 저장후 uploadFile를 하여 받은 결과를 사용해서 상품을 작성하고 있습니다.

Answer

안녕하세요! 재인님!해당 문제의 경우, 복잡하게 생각하면 너무 복잡해질 수 있으므로, 심플하게 풀어내는 것이 중요합니다!해당 배열에 File과 string을 함께 넣을 수 있다면 [File, string, File, File, string] 이런식으로 사진이 저장될 수 있겠죠!여기서 1.File은 미리보기 주소로 만들어서 보여주는데, 미리보기 주소 역시 마찬가지로 string 문자열이에요!또한, 이미 2.fetchUseditem에서 받아온 서버에 업로드된 파일 역시 string 문자열입니다.따라서 둘 다, <img src='string문자열' /> 부분에 입력하게되면 사진이 나오게 되므로 둘을 구분짓지 말고, File이면 string으로 바꿔서 보여주고, 처음부터 string이면 그냥 string 보여주는 방식으로 통일시키면 좋을 것 같아요!

이재인

이미지 업로드 최적화에 대해 고민이 있습니다.

이 글과 비슷한 Q&A

npm start출력 시 미출력됩니다.

장바구니 수량 변경 문의드립니다.

커뮤니티를 올리고 난 후 404 page

[공유] cy.visit() failed trying to load;