[modern-react] 리액트 스터디 파일 추가

modern-react/my-react/src/chap03/EventPassive.js

@@ -0,0 +1,45 @@
+import { useRef, useEffect } from 'react';
+import './EventPassive.css';
+
+export default function EventPassive() {
+  const handleWheel = e => e.preventDefault();
+  const divRef = useRef(null);
+  useEffect(() => {
+    const div = divRef.current;
+    div.addEventListener('wheel', handleWheel, { passive: false });
+    return (() => {
+      div.removeEventListener('wheel', handleWheel);
+    });
+  });
+
+  return (
+    <div className="box"
+      onWheel={handleWheel}>예를 들어 Wheel 이벤트를 핸들러에서...
+    </div>
+  );
+}
+
+
+
+// export default function EventPassive() {
+//   const handleWheel = e => e.preventDefault();
+//   // <div> 요소에 대한 참조 가져오기
+//   const divRef = useRef(null);
+//   useEffect(() => {
+//     // 컴포넌트 시작 시 리스너 설정
+//     const div = divRef.current;
+//     div.addEventListener('wheel', handleWheel, { passive: false });
+//     return (() => {
+//       // 컴포넌트 폐기 시 리스너도 함께 폐기
+//       div.removeEventListener('wheel', handleWheel);
+//     });
+//   });
+
+//   return (
+//     <div ref={divRef} className="box"
+//       onWheel={handleWheel}
+//     >
+//       예를 들어 Wheel 이벤트를 핸들러에서...
+//     </div>
+//   );
+// }