2강 — 서버 컴포넌트
2024 DTC
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
| 폴더 | = 주소 |
| page.js | 화면 |
| layout.js | 공통 틀 |
오늘은 그 코드가 어디서 도는지 배웁니다
'use client' 를 붙일지 안다React 앱이 화면에 뜨기까지
<div id="root"></div>
<script src="/bundle.js"></script>
(흰 화면)
검색엔진은 이 페이지에서 뭘 볼까요?
브라우저가 그린다
첫 화면이 늦다서버가 그려서 보낸다
바로 보인다
<h1>안녕하세요</h1>
<p>이미 내용이 들어 있다</p>
이미 내용이 들어 있다
Next의 컴포넌트는 기본이 서버
app/page.js
export default function Page() {
console.log("어디에 찍힐까?");
return <h1>안녕</h1>;
}
이 console.log는 어디에 찍힐까요?
export default async function Page() {
const res = await fetch(
'https://api.example.com/posts'
);
const posts = await res.json();
return <PostList posts={posts} />;
}
export default function Page() {
const [count, setCount] = useState(0);
return <button onClick={...}>{count}</button>;
}
서버 컴포넌트에서 useState를 쓰면?
브라우저에서 돌게 하려면
app/counter.js
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>
{count}
</button>;
}
useState, useEffect 같은 훅onClick 같은 이벤트window, localStorage이 중 하나라도 필요하면 'use client'
'use client'; // 페이지 전체에 붙임
export default function Page() {
return (
<>
<BigArticle /> {/* 안 움직이는 글 */}
<Counter /> {/* 버튼 하나 */}
</>
);
}
버튼 하나 때문에 페이지 전체를 클라이언트로 만들면?
서버와 클라이언트를 섞어 쓰려면
// 서버 컴포넌트
export default async function Page() {
const posts = await getPosts();
return <LikeButton posts={posts} />;
}
<LikeButton onLike={() => save()} />
서버에서 클라이언트로 함수를 넘기면?
// 클라이언트 컴포넌트 안에서
import ServerThing from './ServerThing'; // 안 됨
// 대신 children으로 받는다
<ClientWrapper>
<ServerThing />
</ClientWrapper>
판단하는 기준
'use client' 는 잎사귀에 붙인다뿌리에 붙이면 그 아래가 전부 클라이언트가 된다
전부 브라우저
고민할 게 없었다기본은 서버
필요할 때만 클라이언트오늘 배운 것
| 기본값 | 서버 컴포넌트 |
| 서버에서 | 데이터, 비밀 키, 큰 라이브러리 |
| 'use client' | 훅 · 이벤트 · window가 필요할 때 |
| 경계 | props는 되고 함수는 안 된다 |
| 원칙 | 잎사귀에만 붙인다 |
직접 해봅시다
console.log 를 넣고 어디 찍히는지 확인'use client' 로 분리하기3강에서는 데이터를 가져옵니다