fix: 컴포넌트 언마운트 시 프리뷰 이미지 revoke

codeit-bootcamp-frontend · Aug 26, 2024 · dfc0519 · dfc0519
1 parent 319f21c
commit dfc0519
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/components/Inputs/FileInput.tsx b/components/Inputs/FileInput.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import Image from "next/image";
 import plusIcon from "@/assets/images/ic_plus.png";
@@ -26,6 +26,14 @@ function FileInput({ name, label, onChange }: FileInputProps) {
     setPreview("");
   };
 
+  useEffect(() => {
+    return () => {
+      if (preview) {
+        URL.revokeObjectURL(preview);
+      }
+    };
+  }, [preview]);
+
   return (
     <div className="file-input-wrapper">
       <div className="mb-3 text-lg font-bold text-gray-800">{label}</div>