선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,

그럴경우 useEffect 안에서 함수 처리를 해줘야할까요? 예를들어 이런식으로?

useEffect(() => {
    const leaflet = document.querySelector('.leaflet');
    const pageElems = document.querySelectorAll('.page');
    let pageCount = 0;

    function getTarget(elem, className) {
      while (!elem.classList.contains(className)) {
        elem = elem.parentNode;

        if (elem.nodeName === 'BODY') {
          elem = null;
          return;
        }
      }

      return elem;
    }

    function closeLeaflet() {
      pageCount = 0;
      document.body.classList.remove('leaflet-opened');
      // 펼쳐졌을때 맨 오른쪽 페이지 닫기
      pageElems[2].classList.remove('page-flipped');

      setTimeout(() => {
        // 이후 맨 왼쪽 페이지 닫기
        pageElems[0].classList.remove('page-flipped');
      }, 500);
    }

    leaflet.addEventListener('click', (e) => {
      let pageElem = getTarget(e.target, 'page');
      if (pageElem) {
        pageElem.classList.add('page-flipped');
        pageCount++;

        if (pageCount === 2) {
          document.body.classList.add('leaflet-opened');
        }
      }

      // let closeBtnElem = getTarget(e.target, 'close-btn');
      // if (closeBtnElem) {
      //   closeLeaflet();
      //   zoomOut();
      // }

      // let menuItemElem = getTarget(e.target, 'menu-item');
      // if (menuItemElem) {
      //   zoomIn(menuItemElem);
      // }

      // let backBtn = getTarget(e.target, 'back-btn');
      // if (backBtn) {
      //   zoomOut();
      // }
    });
 }, []);

인프런 커뮤니티 질문&답변