지원자 리스트 페이지 - 렌더링 성능 개선(issue #150)

src/components/common/sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { NavLink, useLocation } from 'react-router-dom';
 import Avatar from '../avatar/Avatar';
 import * as S from './Sidebar.styled';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import EditMyProfileImg from './editMyProfileImg/EditMyProfileImg';
 import useAuthStore from '../../../store/authStore';
 
@@ -69,4 +69,4 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
   );
 };
 
-export default Sidebar;
+export default React.memo(Sidebar);

src/components/manageProjects/ProjectHeader.tsx

@@ -2,6 +2,7 @@ import * as S from './ProjectHeader.styled';
 import Title from '../common/title/Title';
 import { ProjectDetailExtended } from '../../models/projectDetail';
 import RecruitmentDate from './RecruitmentDate';
+import React from 'react';
 interface ProjectHeaderProps {
   projectData: ProjectDetailExtended;
 }
@@ -18,4 +19,4 @@ function ProjectHeader({ projectData }: ProjectHeaderProps) {
   );
 }
 
-export default ProjectHeader;
+export default React.memo(ProjectHeader);

src/mock/browser.ts

@@ -17,6 +17,7 @@ import {
 import { userPageAppliedProjectList, userPageProfile } from './userpage';
 
 export const handlers = [
+  passNonPassList,
   myProjectList,
   applicantList,
   projectDetail,
@@ -29,7 +30,6 @@ export const handlers = [
   myPageAppliedProjectList,
   userPageProfile,
   userPageAppliedProjectList,
-  passNonPassList,
 ];
 
 export const worker = setupWorker(...handlers);

src/pages/manage/myProjectVolunteer/MyProjectVolunteer.tsx

@@ -19,16 +19,20 @@ import MainLogo from '../../../assets/mainlogo.svg';
 import Modal from '../../../components/common/modal/Modal';
 import { useModal } from '../../../hooks/useModal';
 import ProjectHeader from '../../../components/manageProjects/ProjectHeader';
+import { useMemo } from 'react';
 
 const MyProjectVolunteer = () => {
   const { projectId } = useParams();
-  const sidebarMenuItem = applicantsMenuItems(Number(projectId));
   const { data: projectData } = useGetProjectData(Number(projectId));
   const { isOpen, handleModalClose, handleModalOpen, message } = useModal();
   const { handlePassNonPassStatus } = usePassNonPassMutation(
     Number(projectId),
     handleModalOpen
   );
+  const sidebarMenuItem = useMemo(
+    () => applicantsMenuItems(Number(projectId)),
+    [projectId]
+  );
   const { applicantsData, isApplicantLoading } = useApllicantList(
     Number(projectId)
   );