Parallel Routes Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다. 예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다. Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다. 슬롯은 공유 부모 레이아웃에 속성(props)으로 전달됩니다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children pro..

용어 트리(Tree): 계층 구조를 시각화하는 데 사용되는 관례. 예를 들어, 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있다. 서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부분. 루트(Root): 트리 또는 서브트리의 첫 번째 노드, 즉 루트 레이아웃. 리프(Leaf): 자식이 없는 서브트리의 노드, 즉 URL 경로에서의 마지막 세그먼트. URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다. URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성) app Router Next.js의 13 버전에서는 React Server Components를 기반으로 한 새로운 App Router가 소개되었다. 이 새로운 라우터는 ..

Introduction 이번 글에서는 rules of Hooks에 이어서, 기본이 되는 Basic Hooks에 대해서 소개합니다. 1. useState 컴포넌트에 상태 변수를 추가할 수 있게 해주는 기능입니다. useState는 함수 컴포넌트 내에서 상태 변수를 선언하고 업데이트하는 데 사용됩니다. 다음은 기본적인 사용법입니다: import { useState } from "react"; export default function Home() { const [count, setCount] = useState(0); return ( Next.js Example setCount(count + 1)}>Click me! Clicked {count} times. ); } 조건부 랜더링으로 사용된 예 const [..

Introduction 이번 글에서는 React에서 Hook의 규칙에 대해 알아보고 또 알려진 Hook은 무엇이 있는지 알아보고자 합니다. 1. Rules of Hooks [1] 원문글링크 Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks는 React 16.8에서 새롭게 추가된 기능입니다. 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용할 수 있게 해줍니다.. + React 16.8 버전은 2019년 2월 6일에 릴리스되었습니다 Hooks are JavaScript functions, but you need to follow two..