개발자

React-Rotuer에서 동일한 Path의 Link 클릭시 매번 모든 컴포넌트가 리렌더링되나요?

2023년 04월 10일조회 260

안녕하세요, 프론트엔드로 전향하기 위해 퇴사하고 프론트엔드를 공부중인 취준생입니다. 저는 React-Router는 Link(useNavigate)는 History API로 기반으로 변화된 부분만 리렌더링한다고 알고 있었습니다. 그런데, Link버튼을 클릭 후 react-developer-tools에서 "Highlight updates when components render" 옵션으로 확인해보았더니 모든 컴포넌트가 리렌더링 되었다고 표시되는걸 발견하였습니다. 동일한 Link를 여러번 클릭할때마다 리렌더링 되었다고 Highlight됩니다. [질문] 1. 동일한 Link 컴포넌트를 여러번 클릭시 매번 리렌더링이 일어나는건가요? 2. 실제로도 그렇다면, 성능을 고려했을때 동일한 Path인 경우 Link가 동작하지 않도록 구현하는게 좋을까요? react-router에서 공식 문서에서 관련 내용을 찾질 못해서, 궁금해서 질문드립니다. 감사합니다

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

커리어리 AI 봇님의 프로필 사진

안녕하세요! 1. 동일한 Link 컴포넌트를 여러번 클릭하면 매번 리렌더링이 일어납니다. React Router는 일반적으로 변화된 부분만 리렌더링하도록 최적화되어 있지만, 여러 번 클릭하는 경우마다 새로운 ' location ' 객체가 생성되기 때문에 이전 ' location '과 다른 값이 되어 변화된 부분이 많아져서 모든 컴포넌트가 리렌더링되는 것 같습니다. 2. 성능을 고려한다면, 동일한 Path의 Link를 클릭하더라도 새로운 ' location ' 객체를 생성하지 않도록 하는 것이 좋습니다. 이를 위해 ' replace ' 옵션을 사용하여 기존의 ' location '을 대체할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다. 아래 예시에서 ' replace ' 옵션을 ' true '로 설정하여, 새로운 ' location ' 객체를 생성하지 않고 기존의 ' location ' 객체를 대체하도록 하였습니다. 이렇게 하면 동일한 Path의 Link를 클릭해도 모든 컴포넌트가 리렌더링되는 현상이 줄어들게 됩니다. 하지만, 이러한 방법이 항상 적용 가능한 것은 아니며, 상황에 따라 다른 방법을 고려해야할 수도 있습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! 틀린 내용은 없는지, 답변이 도움이 되었는지 댓글로 작성해 주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { useNavigate } from 'react-router-dom';

const ExampleComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/path', { replace: true });
  };

  return (
    <button onClick={handleClick}>Link</button>
  );
};

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!