Next.js 썸네일형 리스트형 Next.js 11-4 Routing Route Groups 앱 폴더의 계층 구조는 URL 경로에 직접 매핑된다. 그러나 경로 그룹을 생성하여 이 패턴에서 벗어날 수 있다. 경로 그룹을 사용하여 다음을 수행할 수 있다. 이렇게 하면 URL 구조에 영향을 주지 않고 경로를 구성한다. 그리고 특정 경로 세그먼트를 레이아웃을 옵트인 한다. 애플리케이션을 분할하여 여러 루트 레이아웃을 만든다. 경로 그룹은 폴더 이름을 괄호로 감싸서 생성할 수 있다.(예: (folderName)) Examples URL 경로에 영향을 주지 않고 경로 구성 URL에 영향을 주지 않고 경로를 구성하려면 그룹을 만들어 관련 경로를 함께 유지한다. 괄호 안의 폴더는 URL에서 생략된다.(예: (marketing) 또는 (shop)). app -- | layout.js (marketing) -- .. 더보기 Next.js 11-3 Routing Linking and Navigating Next.js 라우터는 클라이언트 측 탐색과 함께 서버 중심 라우팅을 사용한다. 즉각적인 로딩 상태 및 동시 렌더링을 지원한다. 이것은 내비게이션이 클라이언트 측 상태를 유지하고 비용이 많이 드는 재렌더링을 피하고 중단 가능하며 경험 상태를 일으키지 않는다는 것을 의미한다. 경로 사이를 탐색하는 방법에는 엘리먼트와 useRouter hook 두 가지 방법이 있다. 엘리먼트 는 HTML 엘리먼트를 확장하여 경로 간 프리페칭 및 클라이언트 측 탐색을 제공하는 React 컴포넌트이다. Next.js에서 경로 사이를 탐색하는 기본 방법이다. 를 사용하려면 next/link에서 가져오고 href prop을 컴포넌트에 전달한다. // app/page.tsx import Link from 'next/link'; ex.. 더보기 Next.js 11-2 Routing Pages and Layouts Page 페이지는 경로에 고유한 UI이다. page.js 파일에서 컴포넌트를 내보내어 페이지를 정의할 수 있다. 중첩 폴더를 사용하여 경로를 정의하고 page.js 파일을 정의하여 경로를 공개적으로 액세스 할 수 있도록 한다. app 디렉토리 내부에 page.js 파일을 추가하여 첫 번째 페이지를 만든다. app -- ('/') | page.js dashboard -- ('/dashboard') | pages.js // `app/page.tsx` is the UI for the `/` URL export default function Page() { return Hello, Home page! } // `app/dashboard/page.tsx` is the UI for the `/dashboard` U.. 더보기 Next.js 11-1 Routing Fundamentals Terminology Tree 계층 구조를 시각화하기 위한 규칙이다. 예를 들어 부모 및 자식 컴포넌트가 있는 경우 컴포넌트 트리, 폴더 구조 등이 있다. Subtree 새 루트(첫번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부이다. Root 루트 레이아웃과 같은 트리 또는 트리의 첫 번째 노드이다. Leaf URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위 트리의 노드이다. URL Segment 슬래시로 구분된 URL 경로의 일부이다. URL Path 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)이다. 디렉토리 app 버전 13에서 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server 컴포넌트에 구축된 새로운 앱 라우터를 도입했다... 더보기 Next.js 10-5 React Essential Context 서버 컴포넌트에서 타사 컨텍스트 공급자 렌더링 타사 npm 패키지에는 애플리케이션 루트 근처에서 렌더링해야 하는 공급자가 포함되는 경우가 많다. 이러한 공급자가 'use client' 지시문을 포함하는 경우에는 서버 컴포넌트에서 직접 렌더링 하는데 문제가 없다. 그러나 서버 컴포넌트는 새로운 개념이기 때문에 많은 타사 공급자가 아직 지시문을 추가하지 않았을 확률이 높다. 결국 'use client' 지시문이 없는 타사 공급자를 렌더링 하려고 하면 오류가 난다. import { ThemeProvider } from 'acme-theme'; export default function RootLayout({ children }) { return ( {/* Error: `createContext` can't b.. 더보기 Next.js 10-4 React Essential Context 대부분의 React 애플리케이션은 컨텍스트에 의존한다. createContext를 통해 컴포넌트 간에 데이터를 직접 공유하거나 타사 라이브러리에서 가져온 공급자 컴포넌트를 통해 간접적으로 공유한다. Next.js 13에서는 클라이언트 컴포넌트 내에서 컨텍스트가 완전히 지원되지만 서버 컴포넌트 내에서 직접 생성하거나 사용할 수는 없다. 이는 서버 컴포넌트에 React 상태가 없고(대화형이 아니기 때문에) 일부 React 상태가 업데이트된 후 트리에서 대화형 컴포넌트를 다시 렌더링 하는 데 주로 컨텍스트가 사용되기 때문이다. 서버 컴포넌트 간에 데이터를 공유하기 위한 대안에 대해 논의하겠지만 먼저 클라이언트 컴포넌트 내에서 컨텍스트를 사용하는 방법을 살펴보고자 한다. 클라이언트 컴포넌트에서 컨텍스트 사용하기.. 더보기 Next.js 10-3 React Essential 타사 패키지 사용 서버 및 클라이언트 컴포넌트를 언제 사용할까? 서버와 클라이언트 컴포넌트 사이의 결정을 단순화하려면 app 클라이언트 컴포넌트에 대한 사용 사례가 있을 때까지 서버 컴포넌트(디렉토리의 기본값)를 사용하는 것이 좋다. 원하는 작동 서버 컴포넌트 클라이언트 컴포넌트 데이터 가져오기 O X 백엔드 리소스에 액세서(직접적) O X 민감한 정보를 서버에 보관(액세스 토큰 API 키 등) O X 서버에 대한 큰 종속성 유지/클라이언트 측 JavaScript 감소 O X 상호 작용 및 이벤트 리스너( onClick(), onChange() 등) 추가 X O 상태 및 수명 주기 효과 사용 ( useState(), useReducer(), useEffect(), 등) X O 브라우저 전용 API 사용 X O 상태, 효과.. 더보기 Next.js 10-2 React Essential 패턴 클라이언트 컴포넌트를 리프로 이동하기 애플리케이션의 성능을 개선하려면 가능한 경우 클라이언트 컴포넌트를 컴포넌트 트리의 리프로 이동하는 것이 좋다. 예를 들어 정적 요소(예: 로고, 링크 등)가 있는 레이아웃과 상태를 사용하는 대화형 검색 표시줄이 있을 수 있다. 전체 레이아웃을 클라이언트 컴포넌트로 만드는 대신 대화형 논리를 클라이언트 컴포넌트(예: )로 이동하고 레이아웃을 서버 컴포넌트로 유지한다. 이는 레이아웃의 모든 컴포넌트 JavaScript를 클라이언트에 보낼 필요가 없음을 의미한다. // SearchBar is a Client Component import SerchBar from './serchbar'; // Logo is a Server Component import Logo from '.. 더보기 이전 1 2 3 4 5 6 다음