본문 바로가기

DOM 2

[React] useImperativeHandle (forwardRef의 ref 커스터마이징) useImperativeHandle forwardRef를 사용할 때 ref로 넘어가는 메소드나 값들을 커스텀하고 싶은 경우가 있다. 이런 경우 useImperativeHandle을 사용하면 부모 A가 forwardRef 자식 B에 접근해서 여러 메소드나 값을 사용할 수 있게 할 수 있다. 파라미터 useImperativeHandle(ref, createHandle, dependencies?) ref 필수 forwardRef의 두번째 인자로 넘어오는 ref이다. createHandle 필수 부모에서 ref.current 로 접근할 수 있는 핸들러를 리턴하는 함수이다. 어떤 타입이든 넘길 수 있으나 주로 대게 메소드들을 담은 object를 넘긴다. dependencies optional 다른 상태 함수들에서.. 2024. 1. 4.
[JavaScript] 브라우저 로드 트리거 : DOMContentLoaded vs load DOMContentLoaded, load 호출 시점 DOMContentLoaded HTML이 모두 로드되고 DOM 트리가 완성된 후, 외부 리소스 (img src 등)가 아직 로드되지 않았을 때 실행한다. DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있다. jQuery에서의 ready와 유사하다. IE8 이하에서는 지원하지 않았기 때문에 잘 사용되지 않았다. load 브라우저에 모든 리소스(img, style, script 등)이 로드되었을 때 실행한다. DOMContentLoaded보다 로드되는 시점이 늦다. 모든 리소스가 로드된 상태이기 때문에 리소스들의 속성(이미지 크기 등)을 얻을 수 있다. 주요 차이 DOMContentLoaded jQuery에서의 ready와 유사하다. DOM이 준비.. 2023. 3. 27.