[React] React 렌더링 원리 & Next.js 완전 정복

1
2
// div → span 으로 바뀌면
// 자식 포함 전부 날리고 새로 만듦

1
2
// div는 유지하고 className만 변경
<div className="before" /> → <div className="after" />

1
2
3
4
5
6
7
8
9
// key 없으면 순서 바뀔 때 전부 리렌더링 ❌
{
  items.map((item) => <Item item={item} />);
}

// key 있으면 같은 key면 재사용 ✅
{
  items.map((item) => <Item key={item.id} item={item} />);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ❌ index 사용
{
  items.map((item, index) => <Item key={index} item={item} />);
}

// 앞에 아이템 추가되면
// 이전: [A(0), B(1), C(2)]
// 이후: [D(0), A(1), B(2), C(3)]
// 모든 index가 밀려서 전부 리렌더링
// input 같은 컴포넌트면 입력값도 초기화됨 ❌

// ✅ 고유 id 사용
{
  items.map((item) => <Item key={item.id} item={item} />);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 탭 전환할 때 무거운 컴포넌트 마운트
const [isPending, startTransition] = useTransition();

<button
  onClick={() => {
    startTransition(() => setTab("heavy"));
    // 탭 버튼 클릭 반응은 즉시
    // 무거운 컴포넌트 렌더링은 여유될 때
  }}
>
  무거운 탭
</button>;

{
  isPending ? <Spinner /> : <HeavyComponent />;
}

1
2
3
4
5
// 실시간 랭킹 + 애니메이션 동시에
startTransition(() => {
  setRanking(newRanking); // 랭킹 업데이트는 나중에
});
// 애니메이션은 끊기지 않음 ✅

1
2
3
4
5
6
7
8
9
10
11
12
"use client"; // 이거 써야 CSR

function Page() {
  const { data } = useQuery({
    queryKey: ["user"],
    queryFn: fetchUser,
  });
  return <div>{data?.name}</div>;
}

// 브라우저에서 JS 실행 후 데이터 fetch
// 개인화 데이터 (로그인 필요한 페이지)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// App Router - 기본값이 SSR
import { cookies } from "next/headers";

async function Page() {
  // 서버에서 토큰 읽어서 API 호출
  const token = cookies().get("token");
  const data = await fetch("/api/user", {
    headers: { Authorization: `Bearer ${token}` },
    cache: "no-store", // 캐시 안 함
  });
  return <div>{data.name}</div>;
}

// 요청마다 서버에서 HTML 만듦
// 항상 최신 데이터
// 로그인한 유저 개인화 페이지에 적합

1
2
3
4
5
6
7
8
9
10
// revalidate 없거나 false
async function Page() {
  const data = await fetchPosts(); // 빌드할 때 한번만 실행
  return <div>{data.map(...)}</div>;
}

// 빌드 타임에 HTML 완성
// CDN에 올려서 서빙
// 데이터 바뀌면 재배포 필요
// 회사 소개, 이용약관, 404 페이지

1
2
3
4
5
6
7
8
9
10
11
export const revalidate = 60; // 60초마다 재생성

async function Page() {
  const data = await fetchPosts();
  return <div>{data.map(...)}</div>;
}

// 처음엔 SSG처럼 빠름
// 60초마다 백그라운드에서 새로 만듦
// API 실패해도 이전 HTML 유지 ✅
// 다음 revalidate 때 자동 재시도 ✅

1
2
3
4
5
export const revalidate = 0; // SSR (매 요청마다)
export const revalidate = false; // SSG (빌드때 한번)
export const revalidate = 60; // ISR (60초마다)
("use client"); // CSR
// 아무것도 없음                    // SSR (기본값)

1
2
3
4
5
6
7
8
9
10
// 페이지 안에서 fetch마다 다르게
const posts = await fetch("/api/posts", {
  next: { revalidate: 60 }, // ISR
});
const user = await fetch("/api/user", {
  cache: "no-store", // SSR
});
const config = await fetch("/api/config", {
  cache: "force-cache", // SSG
});

1
2
3
4
5
6
7
// 방어 코드 필수
async function Page() {
  const data = await fetch("/api/posts")
    .then((res) => res.json())
    .catch(() => []); // 에러나면 빈 배열로 fallback
  return <div>{data.map(...)}</div>;
}