[ReactLog] React에서 상위 컴포넌트(AppLayout)에서 데이터를 먼저 가져오면 렌더가 빨라지는 이유

🔍

리액트에서 UI가 늦게 뜨는 문제를 겪을 때, 하위 컴포넌트(Navbar 등)에서 useQuery나 useEffect로 직접 API 요청을 하는 구조가 원인일 수 있다. 이럴 땐 상위(AppLayout 등)에서 데이터를 먼저 불러온 뒤 props로 내려주는 방식이 성능상 훨씬 유리하다.

---

✅ 문제 상황 요약

• Navbar 내부에서 직접 useGetCurrentUserProfile()을 실행
• → 이건 비동기 요청이기 때문에
• → 초기 렌더 시 undefined 상태로 먼저 렌더되고
• → 데이터 도착 후 다시 리렌더 됨
• → 사용자 입장에선 "2~3템포 늦게 뜨는 느낌"이 남

---

✅ 해결 방법: AppLayout에서 미리 데이터를 불러오고 Navbar에 넘기기

// AppLayout.tsx
const { data: userProfile, isLoading } = useGetCurrentUserProfile();

return (
  <Navbar userProfile={userProfile} isLoading={isLoading} />
);

// Navbar.tsx
const Navbar = ({ userProfile, isLoading }: Props) => {
  if (isLoading) return <Skeleton />;

  return userProfile ? (
    <div>{userProfile.display_name}님 환영합니다</div>
  ) : (
    <LoginButton />
  );
};

---

⚙️ 왜 이게 더 빠를까?

비교 항목	Navbar 내부에서 fetch	AppLayout에서 fetch 후 props 전달
상태 변화	undefined → data 2번 렌더	1번만 렌더
사용자 체감	"늦게 뜬다" 느낌	즉시 뜨는 느낌
렌더 흐름	비동기 fetch → 지연 발생	부모가 준비해서 자식은 빠르게 렌더

---

✅ 결론

React에서 하위 컴포넌트가 직접 비동기 호출을 하게 되면 지연이 생길 수 있다.
이런 경우엔 상위 컴포넌트에서 먼저 데이터를 준비하고 자식 컴포넌트로 전달하는 방식이 훨씬 빠르고 자연스럽다.

---

📌 관련 개념 키워드

• React 렌더 순서: 부모 → 자식
• useQuery / useEffect의 비동기 렌더 특성
• props 전달 최적화
• TanStack Query + 조건부 enabled 사용