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

Question

그럴경우 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();        // }     });  }, []);

1분코딩 · Answer

이렇게 아예 통째로 넣기 보다는, 리액트 개발방식에 맞추어 부분부분을 컴포넌트화 해주시는게 좋습니다.
전체 구조 자체를 변경해야하는 부분이라 간단하게 설명하기가 어려운데, 언제 유튜브나 추가 강의를 통해서 리액트를 이용해서 인터랙션을 구현하는 것을 영상으로 한번 만들어 보겠습니다^^