NEXT 2

[Next.js] URL: 쿼리파라미터와 동적라우팅 방식

쿼리파라미터와 동적라우팅 URL 방식의 차이쿼리 파라미터 방식URL에 ? 이후로 키-값 쌍으로 데이터를 전달합니다.API 라우트에서는 request.nextUrl.searchParams로 값을 추출합니다.라우트 파일 위치: /app/api/sensor/route.tsURL: `/api/sensor?sensorId=${sensorCodeId}` 동적 라우팅 방식URL 경로의 일부로 값을 전달합니다.API 라우트에서는 params 객체로 값을 추출합니다.라우트 파일 위치: /app/api/sensor/[sensorCodeId]/route.tsURL: `/api/sensor/${sensorCodeId}` 쿼리 파라미터가 적합한 경우선택적(optional) 파라미터가 여러 개일 때필터링, 정렬, 검색 등 부가적..

Next.js의 Layout과 Template

1. 레이아웃(Layout) - 상태와 상호작용이 유지됩니다 - 여러 페이지에서 공유되는 UI를 위해 사용됩니다 - 렌더링 시 레이아웃은 자식 컴포넌트 간에 상태를 보존합니다 - 주로 사용되는 경우// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( 공통 네비게이션 {children} 공통 푸터 )}2. 템플릿(Template) - 각 자식 페이지나 레이아웃이 새로 마운트될 때마다 새 인스턴스가 생성됩니다 - 상태가 유지되지 않고 DOM 요소가 재생성됩니다 - 페이지 전환 시마다 다시 마운..