SideBar 리렌더링 방지

[prayinforrain]

• 현재 SideBar 컴포넌트가 각 페이지 안에 하위 컴포넌트로 들어가 있어 모든 페이지 이동에 대해 리렌더링이 발생하는 상황임
• Next.js에서는 _app.tsx에 포함된 컴포넌트는 리렌더링이 이루어지지 않음
• 현재 모든 페이지 파일에 Frame과 SideBar 컴포넌트가 포함되어 있는데, 이를 반복해서 적용하는 것이 비효율적임
• 따라서 두 컴포넌트를 _app.tsx로 빼면 불필요한 반복을 줄이고 리렌더링 횟수도 최적화 할 수 있을 것으로 보임.
• CSS-in-JS 라이브러리를 사용하는 경우 React devtools에서 항상 리렌더링이 되는 것처럼 보이지만 실제로는 아닐 수 있다고 합니다. [참고 링크]

Refs.

https://velog.io/@gth1123/re-rendering-conditions
https://saber-ash-4ab.notion.site/Component-memoization-feat-context-a4a73e27d15343e6b518a77c0c9d92b3
https://stackoverflow.com/questions/70531347/next-js-how-to-avoid-re-rendering-of-common-components-between-routed-pages
https://stackoverflow.com/questions/59519286/next-js-how-to-prevent-layout-get-re-mounted
https://stackoverflow.com/questions/58987174/how-to-prevent-parent-component-from-re-rendering-with-react-next-js-ssr-two-p