리엑트 라우터2 React 프로젝트에 라우팅 적용하기: React Router v7 기본 사용법 React에서 페이지 이동과 라우팅을 구현하려면 React Router를 사용하는 것이 일반적입니다. 이 글에서는 React Router v7을 기반으로 간단한 라우팅 구조를 만드는 방법을 소개합니다.1. Vite로 React 프로젝트 생성npm create vite@latest my-router-app -- --template reactcd my-router-appnpm install2. React Router 설치npm install react-router-dom@latest3. 페이지 컴포넌트 만들기아래와 같이 두 개의 페이지 컴포넌트를 만듭니다.// src/pages/Home.jsxexport default function Home() { return 홈 페이지입니다}// src/pages/Ab.. 2025. 4. 23. React Router v7 입문부터 실전까지: Next.js 스타일로 배우는 단계별 가이드 1단계: React 프로젝트 및 라우팅 기본프로젝트 생성: create-react-app 또는 vite로 SPA 프로젝트 시작React Router 설치: npm install react-router-dom@^7기본 라우팅 구성: BrowserRouter, Routes, Route를 활용페이지 컴포넌트 구성: /pages/Home.jsx, /pages/About.jsx 형식2단계: 중첩 라우팅과 레이아웃createBrowserRouter 사용으로 중첩 라우트 구성Outlet 컴포넌트로 자식 라우트 삽입Header, Footer 등 공통 레이아웃 구성3단계: 데이터 로딩loader: 라우팅 전에 데이터를 불러옴useLoaderData: 페이지 내부에서 데이터 접근Suspense: 비동기 로딩 처리4단계: .. 2025. 4. 23. 이전 1 다음
