-
useEffect를 사용할 때 무한루프가 도는 이유는 useEffect 안에 사용된 state가 값이 변화할 때마다 리렌더링이 되기 때문이다. 그래서 이걸 막기 위해 ref를 사용하면 좋다. ref는 값이 변화해도 리렌더링이 되지 않는다.
-
이미지 슬라이더 코드리뷰를 하면서 정말 많은 걸 배웠다.
-
addEventListener의 세번째 인자로 passive와 once를 넣어줄 수 있다.
-document.addEventListener("touchend", touchEndHandler, { once: true });이면 이벤트가 딱 한 번만 발생한다.
-document.addEventListener("touchmove", touchMoveHandler, { passive: false, });이면 브라우저가 실제 이벤트를 위해 스크롤을 막지 않는다. 따라서 preventDefault도 먹지 않는다. 브라우저에게 스크롤을 기다리지 않고 즉시 스크롤해도 됨을 알리는거다.
https://velog.io/@sejinkim/Passive-Event-Listeners 찾아보니 passive의 작동원리를 소개한 글이 있다. 내일 읽어봐야지
-
존재하지 않을 수 있는 함수를 호출할 때도 옵셔널 체이닝을 사용할 수 있다.
onDragChange?.(deltaX, deltaY);
-
mouseup : 눌렀던 마우스를 뗄 때 발생하는 이벤트
-
elem.getBoundingClientRect() : 원하는 요소의 위치값을 알아낼 수 있다.
-elem.getBoundingClientRect().width : 뷰포트 기준 엘리먼트의 가로 길이
-elem.getBoundingClientRect().height : 뷰포트 기준 엘리먼트의 세로 길이
조급해하지 말고 하나라도 제대로 짚고 넘어가는 차분한 마음을 가지자!
