목차

불필요한 코드 제거 - themeProvider

불필요한 코드 제거 - Components

Blob객체 생성과 해체

이제 여기서부터 주의해야 할 부분이 있다. 그것은 바로 전달받은 이미지를 blob객체로 만들어주는 URL.createObjectURL이다.

const nowImageUrl = URL.createObjectURL(nowSelectImageList[0]);

<aside> 💡 Blob은 javascript에서 이미지, 사운드, 비디오 같은 멀티 데이터를 다룰 때 사용합니다. 사용처는 Blob으로 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 원활하게 하기 위해 작은 Blob 객체로 나누는 등에 사용합니다.

</aside>

<aside> 💥 createObjectURL 를 통해 만들어진 url는 해당 브라우저가 존재한 상태에서 revokeObjectURL 메소드로 url을 무효화 시키지 않으면 js 엔진에서 garbage collect를 시키지 않고 계속 변수가 남아 메모리 누수가 됩니다.

</aside>

nowImageUrl을 통해서 생긴 blob객체는 DOMString으로 변환되어 실제로 사용할 수 있게 된다.

메모리 누수 제거하기

<aside> ❓ 궁금한 점이 생겼다. 그러면 CreateObjectURL통해서 생성된 url은 계속해서 메모리 공간에 남아있다고 한다 어떻게 제거를 해줄 수 있을까 ?

</aside>

누수제거하기

const [objectURL, setObjectURL] = useState([]);
...
const onChange = e => {
    if (myImage.length <= MAX_UPLOAD - 1) {
			...
      const nowImageUrl = URL.createObjectURL(nowSelectImageList[0]);
			...
      setObjectURL([...objectURL, nowImageUrl]);
    } else {
      alert("사진 3개까지만 업로드 가능");
    }
  };

PostUploadForm 컴포넌트에 objectURL 이라는 상태값을 생성해준다. 이곳에는 createObjectURL을 통해서 생긴 blob객체들을 담아 낼 예정이다. 아무런 이미지나 한번 올려보자

objectURL 객체에는 CreateObjectURL을 통해서 생긴 blob객체들이 담겨있다. 만약 여기서 미리보기로 생성된 blob객체를 지우고 새로운 이미지를 추가하면 어떻게될까?