쿼리파라미터와 동적라우팅 URL 방식의 차이

  1. 쿼리 파라미터 방식
    • URL에 ? 이후로 키-값 쌍으로 데이터를 전달합니다.
    • API 라우트에서는 request.nextUrl.searchParams로 값을 추출합니다.
    • 라우트 파일 위치: /app/api/sensor/route.ts
    • URL: `/api/sensor?sensorId=${sensorCodeId}`
  2. 동적 라우팅 방식
    • URL 경로의 일부로 값을 전달합니다.
    • API 라우트에서는 params 객체로 값을 추출합니다.
    • 라우트 파일 위치: /app/api/sensor/[sensorCodeId]/route.ts
    • URL: `/api/sensor/${sensorCodeId}`

쿼리 파라미터가 적합한 경우

  • 선택적(optional) 파라미터가 여러 개일 때
  • 필터링, 정렬, 검색 등 부가적인 옵션을 전달할 때
  • 페이지네이션(예: ?page=2&limit=10)
  • URL을 깔끔하게 유지하고 싶을 때
  • 같은 엔드포인트에 여러 파라미터가 조합될 때

동적 라우팅(/path/[param])이 적합한 경우:

  • 리소스의 고유 식별자를 표현할 때(ID, 슬러그 등)
  • RESTful API 설계를 따를 때
  • 경로가 리소스의 계층 구조를 표현할 때
  • URL이 의미적으로 중요할 때 (SEO에 유리)
  • 필수적인(required) 파라미터일 때

 

현재 상황(ID를 받아서 검색하는 경우)에 대한 추천

동적 라우팅 방식이 더 적합합니다.

이유

  1. 특정 센서 코드라는 리소스에 직접 접근하는 패턴입니다.
  2. RESTful API 설계 원칙에 더 부합합니다.
  3. sensorCodeId는 필수 파라미터이며 리소스의 식별자입니다.
  4. URL이 더 의미적이고 명확해집니다.
728x90
저작자표시

'코딩공부 > Next.js' 카테고리의 다른 글

[Next.sj & Node.js] Slack을 통한 메시지 발송 및 파일업로드  (0) 2025.03.14
Next.js와 HeidiSQL을 사용한 파일첨부 방법  (1) 2024.12.06
Next.js의 오류처리  (4) 2024.10.31
Next.js의 Layout과 Template  (1) 2024.10.31

1. 레이아웃(Layout)
- 상태와 상호작용이 유지됩니다
- 여러 페이지에서 공유되는 UI를 위해 사용됩니다
- 렌더링 시 레이아웃은 자식 컴포넌트 간에 상태를 보존합니다
- 주로 사용되는 경우

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <nav>공통 네비게이션</nav>
        {children}
        <footer>공통 푸터</footer>
      </body>
    </html>
  )
}



2. 템플릿(Template)
- 각 자식 페이지나 레이아웃이 새로 마운트될 때마다 새 인스턴스가 생성됩니다
- 상태가 유지되지 않고 DOM 요소가 재생성됩니다
- 페이지 전환 시마다 다시 마운트되어야 하는 기능에 적합합니다
- 주로 사용되는 경우

// app/template.tsx
export default function Template({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      {/* 애니메이션 효과나 로깅 등이 필요한 경우 */}
      {children}
    </div>
  )
}


사용 사례 비교:

레이아웃 사용이 적합한 경우:
- 헤더, 푸터, 사이드바와 같은 지속적인 UI 요소
- 전역 상태나 컨텍스트를 공유해야 하는 경우
- 페이지 간 이동시에도 상태를 유지해야 하는 경우

템플릿 사용이 적합한 경우:
- 페이지 전환 애니메이션
- 페이지 접속시마다 초기화되어야 하는 카운터나 타이머
- useEffect 훅이 페이지마다 다시 실행되어야 하는 경우
- 페이지별 피드백이나 분석 기능

실제 사용 예시

// app/layout.tsx (레이아웃)
export default function Layout({ children }) {
  const [user] = useState(getUser()) // 상태 유지됨
  
  return (
    <UserContext.Provider value={user}>
      <nav>
        <Logo />
        <UserProfile />
      </nav>
      {children}
    </UserContext.Provider>
  )
}

// app/template.tsx (템플릿)
export default function Template({ children }) {
  useEffect(() => {
    // 페이지 방문마다 실행됨
    logPageView()
  }, [])

  return (
    <div className="page-transition">
      {children}
    </div>
  )
}



핵심 차이점을 정리하면
1. 상태 유지: 레이아웃은 유지, 템플릿은 초기화
2. 마운팅: 레이아웃은 한 번, 템플릿은 매 페이지 전환마다
3. 용도: 레이아웃은 공통 UI, 템플릿은 페이지별 기능
4. 성능: 레이아웃이 더 효율적 (재렌더링이 적음)

728x90
저작자표시

'코딩공부 > Next.js' 카테고리의 다른 글

[Next.sj & Node.js] Slack을 통한 메시지 발송 및 파일업로드  (0) 2025.03.14
[Next.js] URL: 쿼리파라미터와 동적라우팅 방식  (0) 2025.03.05
Next.js와 HeidiSQL을 사용한 파일첨부 방법  (1) 2024.12.06
Next.js의 오류처리  (4) 2024.10.31

+ Recent posts

티스토리툴바