라우팅

라우팅

URL을 애플리케이션 안의 특정 컴포넌트 혹은 페이지로 매핑하는 과정

• 성공적인 라우팅 핵심은 단순함, 성능, 유지보수성의 올바른 균형

리액트 라우터

리액트 앱에서 선언적 방식을 사용해 클라이언트 사이드 라우팅을 정의

• 독립적인 써드파티 라이브러리

• History API를 활용하여 UI를 URL과 동기화

• 라우트를 컴포넌트에 매핑하는 선언적 접근법 제공

Tanstack Router

• 타입 안전성이 뛰어남

• 파일 시스템 기반 라우팅을 지원함

Next.js 앱 라우터

• 파일 시스템 기반 라우팅

  • 파일 경로가 그대로 URL 경로가 됨

• Next.js 프레임워크 자체에 구현되어있음

  • 리엑트에서 SSR을 구현하려면 서버, 클라이언트 모두에서 라우팅 로직을 처리해야함

  • Next.js는 SSR을 내장 지원하기 때문에 보다 구현하기 쉬움

• 코드를 라우트에 따라 자동으로 분할 -> 로딩 시간이 잠재적으로 개선됨

꿀팁

• 서버 컴포넌트는 클라이언트 사이드 내비게이션에 대해서도 항상 서버에서 렌더링됨

  • 서버 컴포넌트를 항시 가볍게 유지하자

• 서버 컴포넌트와 클라이언트 컴포넌트 사이에 데이터를 전달할 때 조심

  • 큰 데이터를 전달하면 성능에 영향줄 수 있음

  • 초기 렌더링이 필요하지 않다면 클라이언트 컴포넌트에서 데이터를 가져오는 것도 방법

• ??서버 컴포넌트 사이에서 상태를 공유해야 한다면 해당 상태를 공유된 클라이언트 컴포넌트로 전달하는 것을 고려