Next.js 공부하기 3일차
안녕하세요 🐸!
Next.js 3일차 입니다. 지난주부터 야근이 잦아서 공부를 많이 못했네요 다시 해보겠습니다 아자!
특별한 이름을 가지는 파일
layout
화면의 레이아웃을 구성하는 파일입니다. 앞서 Next.js 프로젝트를 실행할 때 레이아웃 파일이 없을 경우 자동으로 생성해주는 부분을 확인했는데요 상세 코드는 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
/*{children} 영역이 바뀔 화면이 랜더링 될 부분 입니다*/
<body>{children}</body>
</html>
)
}
레이아웃 파일은 여러 개 사용할 수 있습니다. 레이아웃은 계층형 구조를 통해 중첩이 가능합니다. 다음은 계층형으로 레이아웃을 적용한 파일 구조 예시입니다.
이 경우 화면 구조는 app/layout.tsx 의 {children} 내부에 app/about-us/layout.tsx 가 레이아웃을 가집니다. 즉 레이아웃끼리 관계를 가지게 됩니다.
여기서 만약 app/about-us/ 의 하위에 jobs 라는 폴더를 만들어 페이지를 생성한다면 상위에 존재하는 app/about-us/ 의 레이아웃이 적용됩니다.
리액트가 화면을 랜더링 하기 위해 찾아가는 순서를 간단하게 순서로 정리해보면 다음과 같습니다.
/(루트) 의 레이아웃- URL에 해당하는 레이아웃
- URL에 해당하는 랜더링 될 컴포넌트
만약 상위 경로에 레이아웃이 있다면 하위 경로에도 일괄적으로 레이아웃은 적용됩니다.
not-found
존재하지 않는 URL에 접근할 때 보여질 404 NOT FOUND 페이지 파일입니다.
Not found 페이지 만들기
파일의 이름만 not-found 로 만든다면 파일의 내용은 일반적인 page 파일과 다를 것이 없습니다.
다음은 예시입니다.
1
2
3
export default function NotFound(){
return <h1>Not Found!</h1>
}
여기서 함수 이름은 임의로 바꾸어도 무관합니다.
Next.js의 렌더링 이해하기
Next.js의 렌더링 개발자가 작성한 코드를 html로 전환하는 과정을 얘기합니다.
Client Side Rendering(CSR) vs Server Side Rendering(SSR)
React는 CSR을 사용합니다. 하지만 Next.js는 SSR을 사용합니다. React의 프레임워크임에도 불구하고요. 이를 직관적으로 알 수 있는 부분은 스크립트 내에 console.log() 를 수행하면 브라우저의 콘솔이 아닌 서버의 콘솔에 남는 것을 확인할 수 있습니다.
Hydration
Hydration은 직역하면 수분 공급 이라는 뜻 입니다. 개념에 대해 알면 이렇게 적절한 단어도 없습니다.
React와 NextJS에서는 조금의 차이가 있긴 하지만 둘 다 최초 접근시 HTML 코드를 제공합니다.
여기서 HTML은 리액트로써의 기능이 없는 뼈대만 존재하는 상태입니다. 이 상태의 DOM을 React가 관리하여 인터렉티브한 앱이 되도록 하는 작업을 Hydaration 이라 합니다.
무미건조한 웹 앱에 수분을 공급해주는 작업으로 보고 이름을 지은 것이 아닐까 생각 합니다.
NextJS로 만든 웹 페이지를 접속하여 개발자 도구에서 자바스크립트를 비활성화 하는 것으로 hydration을 체감해 볼 수 있습니다.
개발자도구 자바스크립트 비활성화 하기
단, Hydration은 모든 컴포넌트에 대해 일어나는 것은 아닙니다. use client 를 사용한 컴포넌트에 한해 일어납니다.
자바스크립트를 비활성화 했을 때 화면 전환 
페이지의 파비콘이 깜빡거리면서 페이지가 로딩되는 것을 알 수 있습니다. 화면 전체가 로딩되고 있으며 이것은 HTML의 a 태그가 하는 기본적인 기능입니다.
이것을 hard navigation 이라 부릅니다. 전통적인 웹은 이 방식을 사용합니다.
자바스크립트를 활성화 했을 때의 화면 전환
파비콘이 깜빡이지 않고 빠르게 화면이 렌더링 되는 것을 확인할 수 있습니다.
이것은 React에서 필요한 부분만 렌더링 하여 사용자 경험을 향상 시키는데 도움이 됩니다.
이것을 soft navigation 이라 부릅니다.
이것은 리액트에서 사용되는 Link 등의 라우팅 기능을 사용하는 방법 입니다.
use client
해당 컴포넌트가 클라이언트 컴포넌트 임을 명시하는 문구 입니다. 파일의 최상단에 사용합니다.
Server Component 와 Client Component
Next.js에서 컴포넌트는 Server Components 와 Client Components 두 가지로 나뉩니다.
주의할 점⚠️ : Server Components, Client Components 이라는 이름 때문에 CSR, SSR 과 관련있는 것처럼 보이지만 이것과는 별개입니다.
Hydration 현상은 Client Component 에서 발생하는 현상입니다.
Server Component
use client 를 사용하지 않아 Hydration이 발생하지 않는 컴포넌트 입니다. 즉, 인터렉티브한 동작이 일어나지 않기 때문에 useState 를 사용할 수 없습니다.
서버 컴포넌트의 장점은 API KEY 등과 같은 중요 정보를 통해 코딩을 할 때, 이 코드는 클라이언트에게 노출되지 않기 때문에 안전하다는 점 입니다.
Client Component
어떠한 특정 컴포넌트를 Client Components 로 사용하기 위해서는 해당 컴포넌트 최상단에
'use client'
키워드를 사용하여 이 컴포넌트가 Client Compoents 임을 명시해야 합니다. 만약 use client 를 명시하지 않을 경우 컴파일 단계에서 에러가 발생합니다. 앞서 설명드린 Hydration 또한 이 Client Component 에서 일어나는 현상입니다.
⚠️ 이름 때문에 use client 를 사용한 클라이언트 컴포넌트는 CSR이 일어난다 생각할 수 있습니다. 컴포넌트 자체는 SSR이 일어납니다. 클라이언트 측에서는 인터렉티브한 리액트 컴포넌트로써 동작하도록 하는 Hydration이 발생할 뿐입니다.