[ React ] gsap ScrollTrigger 사용시 execute 'removeChild' on 'Node': The node to be removed is not a child of this node 오류

 

- 상황

https://webstoryboy.co.kr/1934

11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기

이 블로그를 참고하여 사이트를 만들었다. 이 사이트에서는 페이지가 하나였는데, 나는 메뉴별로 페이지를 만들고 싶어서 라우터를 사용하여 나누었다. 

 

 

그런데, 계속 메뉴를 옮겨갈 때 

 execute 'removeChild' on 'Node': The node to be removed is not a child of this node

이 오류가 떴다.. 😢

 

저 오류로 검색해보았을 때, <> </> 태그를 <div></div>로 바꾸라는 해결책도 있었어서,

App.tsx 를 그렇게 바꾸었음에도 계속 오류가 났다. 

 

혹시나 해서 확인해보니, ScrollTrigger을 적용한 메뉴를 나가서 다른 메뉴로 이동할 때 발생하는 것을 보았다!

그래서 ScrollTrigger이랑 Router 키워드로 열심히 검색을 해본 결과!! 

 

https://gsap.com/community/forums/topic/25901-issue-with-scrolltrigger-pinning-in-gatsbyreact-site/#comment-139180

Issue with ScrollTrigger pinning in Gatsby/React site

 

gsap 홈페이지에서 이 글을 보게 되었고... 나와 거의 유사한 코드이신 분의 댓글을 봤다. 

오류 원인은 ScrollTrigger가 제대도 반환되지 않아서.. 로 보였는데, 분명 kill이 있었는뎁 ㅠ_ㅠ 

암튼 1차적으로 바꿔보았다. 

 

// 원래 코드
useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const horizontal = horizontalRef.current;
    const sections = sectionsRef.current;

    const scrollTween = gsap.to(sections, {
      xPercent: -120 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: horizontal,
        start: "top 56px",
        end: () => "+=" + horizontal.offsetWidth,
        pin: true,
        scrub: 1,
        invalidateOnRefresh: true,
        anticipatePin: 1,
      },
    });

    return () => {
      scrollTween.kill();
    };
  }, []);

 

 

// 바꾼 코드
let ns: any;
    if (sections) {
      ns = Math.random().toString(36).substring(7);
      gsap.to(sections, {
        xPercent: -120 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: horizontal,
          start: "top 56px",
          end: () => "+=" + horizontal.offsetWidth,
          pin: true,
          scrub: 1,
          invalidateOnRefresh: true,
          anticipatePin: 1,
        },
      });
    } else {
      return;
    }

    return () => {
      const sectionTrigger = ScrollTrigger.getById(`${ns}-title`);
      if (sectionTrigger) {
        sectionTrigger.kill();
      }
    };

 

하지만... 이것도 되지 않았다...

 

 

그러다가... ScrollTrigger이 있는 소스에서 <div>로 감싸보라는 댓글을 보고 해봤더니...

/* 수정 전 */
<section id="popular" ref={horizontalRef}>
	생략...
</section>

/* 수정 후 */
<div>
<section id="popular" ref={horizontalRef}>
	생략...
</section>
</div>

 

됐다!!!!!!!!!!!!!!!