useNavigate를 추가한 순간 리렌더 범위가 확장된 건에 대하여..

문제를 직감하게 된 계기

🧐 리렌더 범위가 다른 것이 보이십니까

1번 코드

const Header = (): ReactElement => {
  const [login, setUserLogin] = useAtom(loginStateAtom);

  return (
    <Wrapper>
      <FlexGrow3>
        <Button context={<img src={LongLogo} />} />
      </FlexGrow3>
      {!login && (
        <Button
          context={<Text text={'Sign in'} fontFamily="roboto" />}
          onClick={() => setUserLogin(!login)}
          margin={'0 3vw 0 0'}
        />
      )}
      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
      {login && (
        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
      )}
    </Wrapper>
  );
};

2번 코드

const Header = (): ReactElement => {
  const [login, setUserLogin] = useAtom(loginStateAtom);
  const navigate = useNavigate();

  return (
    <Wrapper>
      <FlexGrow3>
        <Button context={<img src={LongLogo} />}/>
      </FlexGrow3>
      {!login && (
        <Button
          context={<Text text={'Sign in'} fontFamily="roboto" />}
          onClick={() => setUserLogin(!login)}
          margin={'0 3vw 0 0'}
        />
      )}
      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
      {login && (
        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
      )}
    </Wrapper>
  );
};

차이가 보이시나요..?

• const navigate = useNavigate(); 코드를 추가한 순간부터 리렌더 범위가 확장되었습니다.
  • Header 컴포넌트 내부가 리렌더되지 않았는데, 갑자기 Header 컴포넌트가 리렌더 되기 시작했어요..

이유를 아시는 분 제보 부탁드립니다..

ㄴ 범인 찾았습니다. useNavigate custom하기

Link Element 사용 시 리렌더 범위 축소되는 것 확인

- 감사합니다 준태님

const Header = (): ReactElement => {
  const [login, setUserLogin] = useAtom(loginStateAtom);

  return (
    <Wrapper>
      <FlexGrow3>
        <Link to="/">
          <Button context={<img src={LongLogo} />} />
        </Link>
      </FlexGrow3>
      {!login && (
        <Button
          context={<Text text={'Sign in'} fontFamily="roboto" />}
          onClick={() => setUserLogin(!login)}
          margin={'0 3vw 0 0'}
        />
      )}
      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
      {login && (
        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
      )}
    </Wrapper>
  );
};

• react-router-dom의 Link도 FE 상태가 날아가지 않음.

A <Link> is an element that lets the user navigate to another page by clicking or tapping on it.
In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to.
This means that things like right-clicking a <Link> work as you'd expect.
You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

• Link Component는<a href>처럼 페이지 이동을 할 수 있도록 하며, 상태가 유지됨!
• 다만, 페이지 이동 시 검증 등 추가 로직이 들어가거나, 어떤 함수의 결과로 페이지 이동이 발생해야 하면 useNavigate, 아닌 경우에는 Link Component를 사용하는 것이 좋다.

• 참고자료
  • https://reactrouter.com/en/main/components/link
  • https://velog.io/@seokkitdo/React-Link-useNavigate