자바스크립트의 이벤트 처리 질문

Question

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다.

첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다.

사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다.

저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다.

1. 초기상태
콜스택 : [ ]
태스크큐 : [ ]

2. 사용자가 파일을 업로드 -> onChange 이벤트 발생
콜스택 : [handleImageUpload]
태스크큐 : [ ]

3. handleImageUpload 내부에서 loadImage 함수 호출
콜스택 : [handleImageUpload, loadImage]
태스크큐 : [ ]

4. loadImage 내부에서 img 객체 생성 및 src 할당
콜스택 : [handleImageUpload, loadImage]
태스크큐 : [ ]
Web API : 이미지 로딩 시작

5. loadImage 함수 종료, handleImageUpload 함수 종료
콜스택 : [ ]
태스크큐 : [ ]
Web API : 이미지 로딩 진행중

6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가
콜스택 : [ ]
태스크큐 : [onload]
Web API : 이미지 로딩 완료

7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동
콜스택 : [onload]
태스크큐 : [ ]

8. onload 콜백 실행 (캔버스에 이미지 그리기 등)
콜 스택 : [onload, drawImage, ...]
태스크큐 : [ ]

일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다.

Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

김하림 · Answer

이벤트 루프 실행 과정은 설명하신 게 맞습니다.

> `handleImageUpload` 함수가 종료되면 `loadImage` 함수 내에서 생성된 `img` 객체는 가비지 컬렉터에 의해 지워져야 하지 않나요?

아닙니다. `const img = new Image()`로 이미지 객체를 생성하고 나서 `onload` 이벤트를 이미지 객체에 할당했기 때문에 이 이벤트에 대한 참조가 없어질 때까지 `img`는 가비지 컬렉션 대상이 되지 않습니다.

만약 `img`를 가비지 컬렉션 대상으로 만들고 싶으면 `onload` 이벤트 마지막에 `onload` 이벤트를 `null`로 할당해주시면 됩니다.

```
img.onload = null;
```