Main : Turtle 페이지의 pathname 추적

코드
Header에서 리스트 클릭하여 컴포넌트 전환 시, pathname 값을 받아오는 데는 문제가 없지만, scroll을 통한 페이지 전환 시 이전의 pathname으로 인식되어 컴포넌트 자체에 리렌더링이 발생하지 않음
의존성 배열 자체를 잘못 작성한 경우의 수?
- Header 자체에서 스크롤에 의한 router을 관장하기 때문인가
```
// Turtle.tsx
export default function Turtle() {
const [turtleX, setTurtleX] = useState(0);
const [checkUrl, setCheckUrl] = useState(false);
// const location = useLocation();
const currentPath = window.location.pathname;
const theme = useTheme().palette.mode;
```
const moveTurtle = () => { if (theme === 'dark') return; if (turtleX <= window.innerWidth) { setTurtleX(prev => prev + 10); } else { setTurtleX(0); } };

useEffect(() => { console.log(currentPath, checkUrl, 'in checkUrl'); if (currentPath === '/Home' || currentPath === '/') setCheckUrl(true); else setCheckUrl(false); }, [currentPath, checkUrl]);

useEffect(() => { console.log(currentPath, checkUrl, 'in useEffect');

if ((theme !== 'dark' && currentPath === '/Home') || currentPath === '/') { const intervalX = setTimeout(() => { moveTurtle(); console.log(currentPath, checkUrl, 'in setTime'); }, 5000);

return () => clearInterval(intervalX); } }, [turtleX, theme, currentPath]);

return ( <Container $turtleX={turtleX}>
{theme === 'dark' &&
}

); }

// Header.tsx
// 주소 목록
const lists = ['Home', 'About', 'Skills', 'Project', 'Contact'];

/**
 *
 * @returns router에 따른 헤더
 */
export default function Index() {
  const [scroll, setScroll] = useState<boolean>(false);
  const [activeSection, setActiveSection] = useState<string>('Home');

  const currentPath = window.location.pathname;
  const theme = useTheme().palette.mode === 'light';

  const { scrollToTop, scrollToPage } = useMoveScroll();

  // scroll에 따른 Header bg 변경
  useEffect(() => {
    let animationFrameId: number;

    const scrollHandler = () => {
      cancelAnimationFrame(animationFrameId);

      animationFrameId = requestAnimationFrame(() => {
        if (window.scrollY > 100 && !scroll) {
          setScroll(true);
        } else if (window.scrollY <= 100 && scroll) {
          setScroll(false);
        }
      });
    };
    scrollHandler();
    window.addEventListener('scroll', scrollHandler);

    return () => {
      window.removeEventListener('scroll', scrollHandler);
      cancelAnimationFrame(animationFrameId);
    };
  }, [scroll]);

  // 화면에 들어오는 컴포넌트에 따른 주솟값 변경
  useEffect(() => {
    const scrollChangeRouter = () => {
      const section = lists.find(list => {
        const element = document.getElementById(list);
        if (element) {
          const rect = element.getBoundingClientRect();
          return rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
        }
        return false;
      });

      if (section && section !== activeSection) {
        setActiveSection(section);
        window.history.replaceState(null, '', `/${section}`);
      }
    };

    window.addEventListener('scroll', scrollChangeRouter);

    return () => {
      window.removeEventListener('scroll', scrollChangeRouter);
    };
  }, [activeSection]);

  return (
    <Header $scroll={scroll}>
      <Logo variant="h1" onClick={scrollToTop}>
        {theme ? (
          <WbSunnyIcon
            sx={{
              animation: `${sunAni} 2s linear infinite`,
            }}
          />
        ) : (
          <DarkModeIcon
            sx={{
              animation: `${reverseAni} 3s linear infinite`,
            }}
          />
        )}
        Girang's
      </Logo>
      <Tabs
        value={currentPath !== '/' ? currentPath : '/Home'}
        sx={{ '& .MuiTabs-indicator': { backgroundColor: 'transparent' } }}>
        {lists.map(list => (
          <TabList
            key={list}
            label={list.replace('/', '')}
            value={'/' + list}
            to={list}
            component={Link}
            onClick={() => scrollToPage(list)}
          />
        ))}
      </Tabs>
    </Header>
  );
}

choigirang / portfolio

Main : Turtle 페이지의 pathname 추적 #10