[자바스크립트] URL.createObjectURL() 반복적인 객체 생성 오류_💡 / 메모리 관리, URL.revokeObjectURL()

 

[JS_URL.createObjectURL()]

 

로컬 객체 경로를 만들어 주는 URL.createObjectURL()을 img 태그 안에 직접 입력했을 때 반복적으로 객체를 생성하는 것과 그에 대한 해결 방법 대해 알아보자

 

---

 

<STUDY>

 

❓ URL.createObjectURL()을 이용하여 이미지 미리보기를 구현하던 중

      text를 입력할 떄마다 계속해서 이미지 객체를 생성하는 현상을 발견했다.

 

 

이전 프로젝트와 같은 방법으로 구현했는데 이번에만 발생한 이슈라서 이유를 몰라 조금 헤맸다.

전역 스테이트 (useReducer, useContext 이용)로 관리하며 state를 복사해서 그런 것인 줄 알고 따로 빼서 분리하는 등

이것 저것 시도해 보았지만 똑같은 현상이 일어났다.

 

그런데 이유는 바로 img 태그 안에 바로 URL.createObjectURL을 사용하기 때문이었다.

 

text를 입력하면 입력할 onChange 이벤트에 의해 입력될 때마다 리렌더링 되기 때문에 반복적으로 함수가 호출되어 객체를 생성하게 된다.

때문에 메모리 부족 현상 등의 이슈가 발생할 수 있다.

 

 

❗ 그래서 이렇게 따로 state에 저장하는onChange 이벤트를 만들어서 렌더링 해야한다. (리액트)

   - 바닐라 JS에서는 변수로 할당하면 된다.

 

또, 이미지를 삭제하는 경우 효율적인 메모리 관리를 위해서는

URL.revokeObjectURL(object)을 사용하여 생성했던 객체를 삭제해 주는 것도 좋은 방법이다.

 

※ object : createObjectURL을 이용하여 생성한 객체 (예시 코드에서는 image를 넣어주면 됨)

 

 

---

 

이미지 미리보기를 구현하면서 이미지 객체 경로를 굳이 따로 생성하지 않고 바로 img 태그 안에 넣어 렌더링 하는 방법이 더 편하지 않나? 라는 생각에 무심코 그냥 넣어버렸다.

 

그런데 렌더링 될 때마다 객체를 반복적으로 요청하는 이러한 이슈가 발생해 버렸다.

 

앞으로는 조금 더 신중하게 생각하고 결정을 내려야 할 것 같다.

 

 

---

 

내가 보려고 정리하는 자바스크립트🔆

 

👉ez1n github 구경하기👈