실제 프로젝트처럼 진행 하기 떄문에 babel과 webpack을 적용을 하였다.

webpack devserver를 사용하고 나서 router의 코드를 다음과 같이바꾸었더니 새로고침해도 잘 작동이 된다.

let currentPath = window.location.pathname;

버그잡자

1. 뒤로가기시에 랜더링이 제곱배로 늘어남

먼저 기존의 버그였던 뒤로가기시 랜더링이 엄청 일어나는거였는데 해당코드는 reRenderCount값이 계속 0으로 나와서 생기는 문제였다

아마 React는 객체라 값을 참조하고 있는것이 아닌 reRenderCount가 복사된 값을 할당 받는 방식이여서 그런것 같다 따라서 React의 생명주기에 직접관여하지 않고 useEffect를 사용해서 간접적으로 관여하는 식으로 해결했다.

export const Routes = ({ children }) => {
  if (reRenderCount < 1) {
    window.addEventListener("popstate", () => {
      currentPath = window.location.pathname;
      render();
    });
  }

  return React.createElement(React.Fragment, null, ...children);
};

export const Routes = ({ children }) => {
  useEffect(() => {
    window.addEventListener("popstate", () => {
      currentPath = window.location.pathname;
      render();
    });
  }, []);

  return React.createElement(React.Fragment, null, ...children);
};