onLoadStart는 리소스(이미지, 비디오, 네트워크 요청 등)의 "로딩이 시작될 때" 발생하는 이벤트 또는 그 이벤트를 받는 콜백을 뜻합니다. 즉, 브라우저나 런타임이 해당 자원에 대한 데이터를 가져오기 시작했음을 알려주는 신호입니다. 주요 내용: - 의미: 로딩 프로세스가 시작되었음을 알림. 실제 데이터가 도착하기 전에 발생합니다. - 사용처: XMLHttpRequest/Fetch의 ProgressEvent('loadstart'), HTMLMediaElement(audio/video)의 "loadstart" 이벤트, React/React Native 컴포넌트의 onLoadStart 프로퍼티(예: Image, Video) 등. - 용도: 로딩 스피너 표시, 상태(state)를 "로딩 중"으로 전환, 초기 타이머 시작 등 로딩 시작 시 해야 할 동작 트리거에 사용. - 이벤트 객체: XHR 등에서는 ProgressEvent가 전달되어 전송 크기 정보가 포함될 수 있고, 미디어 요소에서는 일반 Event가 전달됩니다. - 순서: 보통 loadstart → progress (여러 번) → load / error / abort → loadend 순으로 발생합니다. - 주의사항: 항상 데이터가 즉시 사용 가능하다는 보장은 없고, 같은 리소스의 재시도나 소스 변경으로 여러 번 발생할 수 있습니다. 프레임워크마다 이름(onLoadStart vs loadstart)과 전달되는 인자 형식이 다릅니다. 간단한 예: - XHR: xhr.addEventListener('loadstart', () => { /* 로딩 시작 */ }); - HTML 비디오: video.addEventListener('loadstart', () => { /* 준비 표시 */ }); - React Native Image:
setLoading(true)} onLoadEnd={() => setLoading(false)} /> 요약하면, onLoadStart는 리소스 취득 과정의 시작 지점을 감지해 초기 로딩 처리(로딩 표시, 상태 변경 등)를 하게 해 주는 이벤트/콜백입니다.
