• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

20.11.01 13:53 작성 조회수 142

0

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

course-thumbnail

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

답변 1

답변을 작성해보세요.

2

1분코딩님의 프로필

1분코딩

지식공유자

2020.11.03

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

반가우면반갑다고해님의 프로필

반가우면반갑다고해

질문자

2023.03.03

선생님 오랜만에 찾아뵈었습니다.
혹시 유튜브나 추가강의를 통해서 리액트를 통해 인터랙션을 구현하는 영상 올리신적이있으시다면 링크좀 부탁드려도될까요?ㅠㅠ

이 글과 비슷한 Q&A