Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?)
아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자
Layout (Nested Layout)
가장 눈이 가는 기능은 Layout이다. Next, Nuxt를 둘 다 사용해 본 개발자들은 아마 분명 Next의 Layout 방식이 아쉬울 것이라고 생각할 것 같다. 하지만 레이아웃 기능이 생기면서 UI 공유에 대한 고민으로부터 조금 자유로워질 수 있을 것 같다.
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode,
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
);
}
위와 같이 layout.js를 폴더에 위치시키면 하위 페이지들은 layout에서 정의한 UI를 공유할 수 있다.
app/layout.js까지 이 layout들은 Nested Layout으로 아래와 같이 중첩된다.
app/layout.js -> app/dashboard/layout.js -> app/dashboard 내의 페이지들
예시 코드: https://github.com/bysxx/next-ts-template-tailwind/tree/master/app
Server Components
Next13에서는 새로운 Server Components 아키텍처에 대한 제공을 해준다.
우선 기본적으로 Next13에서 제공하는 컴포넌트는 기본적으로 전부 Server Components로 JS 번들 사이즈가 크게 줄기 때문에 초기 렌더링 속도를 높일 수 있다.
그렇기 때문에 대부분의 경우 Server Components 사용을 추천한다.
하지만 아래와 같은 경우에는 Client Components를 사용하라고 가이드를 해주고 있다.
- Add interactivity and event listeners (onClick(), onChange(), etc)
- Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc)
- Use browser-only APIs
- Use custom hooks that depend on state, effects, or browser-only APIs
- Use React Class components
위와 같은 경우에는 아래와 같이 Client Components를 만들어 사용을 해야 한다.
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
그렇다면 Server Components와 Client Components를 함께 사용할 때는 어떤 점을 주의해야 할까?
'use client';
// ❌ This pattern will not work. You cannot import a Server
// Component into a Client Component
import ServerComponent from './ServerComponent';
export default function ClientComponent() {
return (
<>
<ServerComponent />
</>
);
}
위와 같이 Client Components에서 Server Components를 호출하는 경우에는 동작하지 않는다고 한다.
흠.. 그렇다면 어떻게 위 문제를 해결해야 할까?
// client components
'use client';
export default function ClientComponent({children}) {
return (
<>
{children}
</>
);
}
import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";
// Pages are Server Components by default
export default function Page() {
return (
<ClientComponent>
<ServerComponent />
</ClientComponent>
);
}
이런 방식을 통해 불러와야 한다고 한다..
그리고 기존에 사용하던 패키지의 컴포넌트들 중 useEffect와 같은 훅을 사용하고 있는 함수가 있다면 동작을 하지 않을 수도 있다고 한다. 그런 경우에는 'use client'가 포함된 Wrapper를 만들어 사용해야 한다고 한다.
'use client';
import { AcmeCarousel } from 'acme-carousel';
export default AcmeCarousel;
Data Fetching에 대한 이야기도 있지만 이 부분은 Data Fetching을 다룰 때 같이 얘기해 보면 좋을 것 같다.
위 두 기능 모두 Next 13의 핵심 기능이면서 Next 12.x -> Next 13으로 마이그레이션을 한다고 했을 때 꽤 까다로울 것 같은 부분이다.
실제로 사용을 해봤을 때는 layout 기능이 참 마음에 들었다
Next13 + TypeScript Template: https://bysxx.tistory.com/19
'front-end > next.js' 카테고리의 다른 글
Server Components 활용하는 방법 (0) | 2023.10.12 |
---|---|
Next.js 13.5 (2) | 2023.10.11 |
Next 13.4 - App Router 안정화 버전 출시 with Turbopack, Server Actions (0) | 2023.05.13 |
Next13을 알아보자 - 2 (Streaming) (0) | 2023.04.21 |
Next13 + TypeScript Template 공유 (Next13 쉽게 시작하는법) (0) | 2023.04.12 |