코멘토

직무 · 모든 회사 / 모든 직무

Q. 모바일 웹에서 사진을 state로 들고 있어도 될까요?

포포테토칩00

모바일 웹에서 사진 업로드 기능을 처음 만들어보고 있는 초보 개발자입니다. 사용자가 사진을 선택하면 원본을 그대로 쓰지 않고 미리 리사이즈한 뒤(예: 1920px 정도) React state에 Blob 형태로 들고 있다가 저장 버튼을 누를 때 한 번에 업로드하는 방식을 생각하고 있습니다. 다만 사진이 여러 장이 될 경우, React state에 Blob 파일을 계속 들고 있는 게 모바일에서 메모리 문제를 일으킬 수 있는지, 이런 경우 IndexedDB 같은 브라우저 저장소를 사용하는 게 더 일반적인지가 궁금해졌습니다. 그래서 질문은: 모바일 웹 기준으로 리사이즈된 이미지라면 state로 몇 장 정도까지는 무리 없이 사용하는 편인지 사진이 많아질 경우, 실제 현업에서는 state로만 관리하는지, IndexedDB를 함께 사용하는지 IndexedDB를 쓰는 게 과한 선택인지, 아니면 흔한 패턴인지 알고 싶습니다. 모바일 웹을 경험해보신 분들의 조언이 간절합니다..! ㅠㅠ

2026.01.18

답변 2

  • 만
    만나서 반갑습니다.함박웃음치과
    코과장 ∙ 채택률 61%

    안녕하세요 리사이즈(1920px)라도 Blob를 state에 여러 장 오래 들고 있으면 메모리 급증(특히 iOS Safari)해서 “몇 장” 정답은 없지만, 실무에선 보통 state엔 메타/미리보기(URL)만 두고 원본·리사이즈 데이터는 업로드 직전까지 최소화합니다. 사진이 많거나 ‘저장 버튼까지 오래 대기’ 시나리오면 IndexedDB에 파일(Blob) 저장 + state에는 key만 유지가 더 안전·일반적이고, 업로드 후에는 URL.revokeObjectURL/참조 해제로 메모리 회수까지 챙기는 편입니다.

    2026.01.18

  • 전문상담HL 디앤아이한라
    코이사 ∙ 채택률 63%

    안녕하세요, 성실히 답변 드리겠습니다. 채택 바랍니다.^^ 모바일 웹 기준으로 리사지으된 이미지라도 Blob를 state에 많이 들고 있으면 메모리 부담이 생길 수 있습니다. 몇장 정도까지 무리 없는지는 디바이스 성능에 따라 다르지만, 보통 5-10장 이상이면 주의하는 편입니다. 현업패턴 > 소수장(1-5장)은 state에 그대로 들고 쓰기도 하지만, 사진이 많거나 장기간 보관해야 하면 indexedDB나 Cache API 같은 브라우저 저장소를 함께 쓰는것이 일반적입니다. > IndexedDB는 과한 선택이 아니라, 대용량 파일 / 여러장 이미지 관리 시 흔히 쓰는 패턴입니다. 즉 장수가 적으면 state 만으로도 가능하지만, 많아지면 indexedDB 병행이 안정적입니다.

    2026.01.17

함께 읽은 질문

궁금증이 남았나요?
빠르게 질문하세요.