나의 React 여정: 27일차

리액트 라우터

오늘의 초점은 React 단일 페이지 애플리케이션(SPA)에서 원활한 탐색을 구축하기 위한 핵심 도구인 React Router를 마스터하는 것입니다. 저의 학습 여정과 발견을 안내해 드리겠습니다!

React Router로 네비게이션을 구축하면서 배운 점
1.설정 및 설치:
React Router 사용을 시작하기 위해 다음을 사용하여 라이브러리를 설치했습니다.

npm install react-router-dom

다음으로 필요한 모듈을 가져왔습니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.경로 만들기:
createBrowserRouter를 사용하여 경로를 생성하고 경로를 정의하고 이를 특정 구성 요소에 연결했습니다.

예:

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

• 동적 URL: 경로 경로:'/profiles/:profileId'는 동적 라우팅을 보여줍니다. profileId를 기반으로 고유한 프로필 페이지를 렌더링할 수 있습니다.
• 오류 처리: errorElement를 추가하면 잘못된 URL로 이동하는 사용자에게 404 찾을 수 없음 페이지가 표시됩니다.

3.404 오류 처리:
React Router의 Link 구성 요소를 사용하여 사용자 정의 오류 페이지(NotFoundPage.jsx)를 만들었습니다.

<Link to="/">Home</Link>

이렇게 하면 브라우저 전체를 새로 고치지 않고도 홈페이지로 다시 탐색할 수 있어 SPA 경험이 유지됩니다.

4.구성요소를 동적으로 매핑:
ProfilesPage.jsx에서는 map 메소드를 사용하여 각 프로필에 대한 링크를 동적으로 생성했습니다.

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

코드를 다시 작성하지 않고도 새 프로필을 추가할 수 있으므로 확장성이 뛰어납니다.

5.페이지 구조:
각 페이지/구성 요소는 특정 용도로 사용됩니다.

• 홈페이지: 사용자가 /를 방문할 때 기본 콘텐츠를 표시합니다.
• 프로필 페이지: 개별 프로필에 대한 링크를 나열합니다.
• 프로필 페이지: 특정 프로필과 관련된 동적 콘텐츠에 대한 자리 표시자를 표시합니다.
• NotFoundPage: 잘못된 URL을 처리하여 사용자 경험을 향상합니다.

6.전체 페이지 새로 고침 방지:
태그는 불필요한 전체 페이지 새로고침을 방지합니다. 이렇게 하면 애플리케이션의 속도와 반응성이 유지됩니다.

7.내포된 뷰 렌더링:
React Router를 사용하면 경로를 효율적으로 구성하여 중첩된 구성 요소나 레이아웃을 쉽게 렌더링할 수 있습니다.

마지막 생각
React Router는 풍부하고 사용자 친화적인 SPA를 구축하는 데 필수적인 도구입니다. 동적으로 경로를 지정하고 오류를 적절하게 처리하며 원활한 탐색 환경을 보장하는 기능은 강력합니다.

위 내용은 나의 React 여정: 27일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!