실제 운영 중인 웹 서비스의 특정 페이지에서 이상한 점을 발견했다.
어떤 페이지는 빠르게 로딩되고, 어떤 페이지는 눈에 띄게 느렸다.
사용자들도 "왜 이 페이지만 느려요?"라는 문의를 자주 했다. 무엇이 문제인지 찾아보기로 했다.
문제 발견
Chrome DevTools의 Network 탭으로 각 페이지의 API 호출 패턴을 확인했다.
- F12로 개발자 도구 열기
- Network 탭에서 페이지 새로고침 후 XHR/Fetch 필터 적용
- 사용자 정보 관련 API 호출 패턴 확인
- 각 페이지별 호출 횟수와 데이터 크기 측정
결과는 다음과 같았다.
| /관리자 페이지 A | 0회 | 0 kB |
| /관리자 페이지 B | 1회 | 1.1 kB |
| /관리자 페이지 C | 1회 | 1.1 kB |
| /관리자 페이지 D | 2회 | 2.2 kB |
같은 사용자 정보 관련 API를 페이지마다 다른 횟수로 호출하고 있었다.
성능 측정
실제 사용자가 체감하는 성능 차이를 확인하기 위해 Lighthouse로 측정해봤다.
프로덕션 환경에서 측정한 결과는 다음과 같았다.
관리자 페이지 D 페이지 (API 2회 호출)
- Performance Score: 20/100점 (Poor)
관리자 페이지 A 페이지 (API 0회 호출)
- Performance Score: 69/100점 (Needs Improvement)
차이가 49점이었다. 245%의 성능 격차가 났다.
원인 분석
코드를 확인해보니 각 페이지마다 사용자 정보를 가져오는 방식이 달랐다.
최적화된 페이지는 이미 로딩된 데이터를 재사용했다.
// 예시 : 최적화된 페이지
const TeachersPage = () => {
const [userInfo] = useAtom(userAtom);
if (!checkUserData(userInfo)) {
return <LoadingSpinner />;
}
return <TeachersTable />;
};
문제가 있는 페이지는 컴포넌트에서 독립적으로 API를 호출했다.
// 예시 : 문제가 있는 페이지
const DocumentHistoryPage = () => {
const [userInfo] = useAtom(userAtom);
useEffect(() => {
fetchUserProfile(); // 첫 번째 호출
}, []);
useEffect(() => {
if (someCondition) {
fetchUserProfile(); // 두 번째 호출
}
}, [dependency]);
return <HistoryTable />;
};해결 방법
Layout 레벨에서 한 번만 API를 호출하고, 모든 페이지에서 캐시된 데이터를 사용하도록 변경했다.
// 예시 : _layout.jsx
const Layout = ({ children }) => {
const [userInfo, setUserInfo] = useAtom(userAtom);
useEffect(() => {
if (!userInfo) {
fetchUserProfile().then(setUserInfo);
}
}, []);
return (
<div>
<Header />
{children}
<Footer />
</div>
);
};모든 페이지에서 일관된 패턴을 사용하도록 수정했다.
const OptimizedPage = () => {
const [userInfo] = useAtom(userAtom);
if (!checkUserData(userInfo)) {
return <LoadingSpinner />;
}
return <PageContent />;
};
기존에 각 페이지에서 개별적으로 호출하던 fetchUserProfile() 함수 호출을 제거했다.
개선 결과
| Lighthouse 점수 | 20점 | 71점 | 3.55배 향상 |
| API 호출 횟수 | 2회 | 0회 | 개선 |
| 데이터 전송량 | 2.2 kB | 0 kB | 개선 |
| 성능 등급 | Poor | Needs Improvement | 2단계 상승 |
Network 탭으로 확인한 결과, 관리자 페이지 D에서 사용자 정보 API 호출이 완전히 제거되었다.
배운 점
- 추측이나, 감이 아닌 Chrome DevTools와 Lighthouse 같은 도구로 성능에 대한 객관적인 데이터를 얻는것이 중요하다.
- 같은 팀에서 개발해도 페이지마다 다른 패턴이 적용될 수 있다는 점을 확인했다. 정기적인 코드 리뷰와 아키텍처 가이드라인이 필요하다.
- 단순해 보이는 API 중복 호출 제거로 성능 향상을 시킬 수 있다.
'REACT' 카테고리의 다른 글
| React에서 component.jsx와 index.js가 함께 존재하는 이유 (0) | 2025.02.27 |
|---|---|
| React 프로젝트에서 react-app-rewired 설정 및 삭제 후 빌드 파일 정리하기 (0) | 2025.02.17 |
| [REACT] List와 Key (0) | 2025.01.02 |
| [REACT] 조건부 렌더링(Conditional Rendering) (1) | 2024.12.31 |
| [REACT] EVENT (0) | 2024.12.29 |
