[CHAT] 사이드바 UI 수정 및 채팅방 컴포넌트 생성

[yewon830]

#️⃣연관된 이슈

📝작업 내용

• 사이드바 UI 수정(색상 및 배치)
• 사이드바 MemberList 컴포넌트 분리 : 유지보수 및 가독성
• 드롭다운 컴포넌트 생성
• 채팅방 컴포넌트 생성 및 연결

스크린샷 (선택)

💬리뷰 요구사항(선택)

제가 작업 파일이 지현님과 겹치는 부분이 있어서 충돌 발생 or 꼬일까봐 PR 타이밍을 많이 놓쳤습니다
제가 비교하긴 했는데 혹시 최근에 본인이 작업했던 코드가 없어지지는 않았는지 확인 부탁드립니다

[jihyun-j]

useMemo와 useCallback 둘 다 사용하셔서 둘의 차이점 비교하는데 도움이 되었습니다! 혹시 처음부터 최적화를 미리 고려하셔서 사용하신건가요? 저는 아직 최적화를 고려해서 짜기 보다는 기능 먼저 되면 나중에 리펙토링하는 식으로 코드를 짜는편이라..허헣

[yewon830]

아 최적화에 대해서 아직 많이 몰라서 ㅋㅋ... 좀 더 공부해야겠지만 메모이제이션된 값을 쓰면 좋을 것 같다고 개인적으로 판단했을 때 씁니다. 적절하게 사용했는지는 잘 모르겠네요 아래는 지피티 선생님에게 useMemo를 상태 업데이트가 빈번하게 나타나는 경우에 쓰는게 좋은지 여쭈어보았을 때 답입니다

상태 업데이트가 빈번하게 일어나는 경우 useMemo를 사용하는 것이 항상 최적의 선택은 아닙니다. useMemo는 특정 값이나 계산 결과를 메모이징하여 불필요한 재계산을 방지하기 위해 사용됩니다. 그러나 상태 업데이트가 빈번하게 발생하면 useMemo의 이점이 줄어들 수 있습니다. 왜냐하면 상태가 바뀔 때마다 useMemo의 의존성 배열이 변경되어 메모이제이션된 값을 재계산해야 하기 때문입니다.

상태 업데이트가 빈번한 경우의 고려 사항
컴포넌트 구조 최적화:

상태 업데이트가 빈번하다면, 컴포넌트를 더 작은 단위로 나누어 특정 부분만 업데이트되도록 하는 것이 좋습니다. 이를 통해 불필요한 전체 재렌더링을 피할 수 있습니다.
React.memo 사용:

자주 업데이트되지 않는 컴포넌트를 React.memo로 감싸서 불필요한 재렌더링을 방지할 수 있습니다. React.memo는 컴포넌트의 props가 변경되지 않으면 해당 컴포넌트를 재렌더링하지 않습니다.
useCallback 사용:

상태 업데이트로 인해 함수가 재생성되는 것을 방지하기 위해 useCallback을 사용할 수 있습니다. 이는 useMemo와 비슷하지만 함수의 메모이제이션에 특화되어 있습니다.
useMemo의 적절한 사용:

상태 업데이트가 빈번하더라도 계산 비용이 높은 작업이나 렌더링 비용이 높은 컴포넌트의 경우 useMemo를 사용하여 최적화할 수 있습니다. 그러나 이 경우, 의존성 배열을 신중하게 구성하여 불필요한 재계산을 최소화하는 것이 중요합니다.