인프런 커뮤니티 질문&답변

조건부 렌더링을 통해 다음과 같이 url에 따라 특정 컴포넌트를 생성하는 방법을 이해했습니다.

const render = () => {
    const path = this.state.currentPage;
    $app.innerHTML = "";
    if (path.startsWith("/city")) {
      renderHeader();
      renderCityDetail();
    } else {
      renderHeader();
      renderRegionList();
      renderCityList();
    }
  };

이 경우, 컴포넌트가 추가될 때마다 this.setState에 추가된 컴포넌트의 setState를 추가로 호출해야 하는 번거로움도 사라진 것 같습니다.

하지만, 상세 페이지와 메인 페이지를 계속 왔다갔다 할 경우, 공통으로 호출되는renderHeader() 와 다른 렌더링 함수가 호출되고 인스턴스가 계속 생성이 될 것 같습니다.

이렇게 인스턴스가 계속 생성이 되면, 메모리 효율이 좋지 않을 것 같은데, React나 Vue 같은 도구에서는 이런 문제를 해결해주고 있나요? 아니면, 이 정도는 크게 신경 안써도 될 정도로 미비한 건지 궁금합니다.