# All files / src/chap03 EventPassive.js

0% Statements 0/9
100% Branches 0/0
0% Functions 0/4
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46

     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>
    //   );
    // }