[Client] 성능개선 리팩터링 - LeftSideBar 렌더링 리팩터링

[dohyeons]

이슈와 연결하기

Issue Number: #303

무엇이 추가 되었나요?

1. 불필요한 리렌더링이 많아 수정하게 되었습니다.

햄버거 클릭과 메뉴 호버 시 불필요한 렌더링이 너무 많았습니다(로고, 호버링이 되지 않은 메뉴 등...). 따라서 이를 해결하고자 리팩터링을 진행했습니다.

기존 코드에는 isMenuOpen 과 hoverTarget 이 분리되지 않은 채로 LeftNav 에 존재했습니다. 따라서 호버링과 햄버거 클릭 시마다 상태가 업데이트 되어 컴포넌트가 전부 리렌더링이 발생했습니다. LeftSideBar의 경우 다행히 구조가 많이 복잡한 편은 아니어서, 컴포넌트의 구조를 재구성 하는 것만으로도 해결이 가능했습니다.

이를 위해 햄버거 메뉴를 컴포넌트로 분리했습니다. 이렇게 로고의 리렌더링은 막을 수 있었습니다.

또한 개별 메뉴의 리렌더링을 막기 위해 각 메뉴를 LeftNavMenu라는 컴포넌트로 만들었고, 여기에서 hoverTraget을 관리하도록 했습니다. LeftNavMenu는 el, i를 props로 받으며, hoverTarget 이 전달받은 el과 같다면 LeftNavIcons 는 i를 props로 전달받아 렌더링합니다. LeftNavIcons 는 props로 받은 아이콘들의 배열 icons의 i번째 인덱스의 아이콘을 반환하는 컴포넌트입니다.

2. 스타일 로직 분리
   컴포넌트의 스타일을 담당하는 로직을 style.ts로 분리했습니다. 기존엔 각 컴포넌트마다 스타일이 작성되어 있었는데, 파일 하나하나의 길이가 너무 길고, 가독성이 굉장히 떨어졌습니다. 따라서 style.ts에서 스타일 로직을 담당하도록 했으며, 각 스타일 위에 스타일을 사용하는 컴포넌트를 주석으로 작성했습니다. 요거보다 더 좋은 방식이 생각나시면 알려주세요!

기타 정보

불필요한 리렌더링을 방지하는 작업을 하면서, 코드의 가독성과 분리에 신경을 많이 썼습니다. 특히 하나의 컴포넌트는 이상적으로 하나의 일만 수행해야 한다는 단일 책임 원칙을 지키려고 노력했습니다. (참고: https://react.dev/learn/thinking-in-react)

[kihyeoon]

우와... 리렌더링은 생각도 못했네요..! 스타일 분리까지 하시다니 좋습니다 ㅎㅎ

[dohyeons]

우와... 리렌더링은 생각도 못했네요..! 스타일 분리까지 하시다니 좋습니다 ㅎㅎ

왕 기현님이당 오랜만이에여~~~ 먼가 프로젝트때는 완성에 급급해서 코드를 급하게 짜서 리팩터링 해야지 해야지 하고 생각만 했는데, 최근에 리렌더링하고 최적화 공부하면서 적용하보려구여~~

[uxolrv]

우와 프로젝트하는 내내 저 메뉴 리렌더링되는 거 신경쓰였었는데 완전 깔끔하게 리팩터링하셨군여??!
그나저나 리액트 올만에 보니까 하나두 모르겠네요... 저두 다시 공부를 좀 해야겠어욥 자극받구 갑니다 😿
수고하셨어여!!!! 👏👏👏