React Router로 탐색하기 React Js Part A React 애플리케이션 라우팅 가이드

React 시리즈에 다시 오신 것을 환영합니다! 이전 게시물에서는 컴포넌트, 상태, 소품, 이벤트 처리와 같은 필수 개념을 다루었습니다. 이제 React Router를 사용하여 React 애플리케이션의 라우팅을 살펴보겠습니다. 라우팅을 사용하면 앱 내의 다양한 보기나 구성요소 간을 탐색하여 원활한 사용자 경험을 만들 수 있습니다.

리액트 라우터란 무엇인가요?

React Router는 React 애플리케이션에서 라우팅을 가능하게 하는 강력한 라이브러리입니다. 이를 통해 애플리케이션에서 여러 경로를 정의하고 URL 경로를 기반으로 특정 구성 요소를 렌더링할 수 있습니다. 이 기능은 탐색 시 전체 페이지를 다시 로드할 필요가 없는 단일 페이지 애플리케이션(SPA)을 구축하는 데 매우 중요합니다.

React Router 설치
시작하려면 React Router를 설치해야 합니다. npm을 사용하여 이 작업을 수행할 수 있습니다.

npm install react-router-dom

기본 라우팅 설정

여러 경로가 포함된 간단한 애플리케이션을 설정해 보겠습니다. 홈페이지, 정보 페이지, 연락처 페이지로 구성된 애플리케이션을 만들어 보겠습니다.

1. 기본 구성요소 생성
먼저 홈, 정보, 연락처의 세 가지 구성 요소를 만듭니다.

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

2. 라우터 설정
이제 기본 애플리케이션 파일(일반적으로 App.js)에 라우터를 설정해 보겠습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

설명:

• 라우터: BrowserRouter 구성 요소는 전체 애플리케이션을 래핑하여 라우팅을 활성화합니다.
• 링크: 링크 구성요소는 페이지를 다시 로드하지 않고 URL을 변경하는 탐색 링크를 생성하는 데 사용됩니다.
• 경로: 경로 구성 요소는 경로와 경로가 일치할 때 렌더링할 구성 요소를 정의합니다.
• Switch: Switch 구성 요소는 한 번에 하나의 경로만 렌더링되도록 합니다.

페이지 간 이동
설정이 완료되면 이제 탐색 메뉴의 링크를 클릭하여 홈, 정보, 연락처 페이지 사이를 이동할 수 있습니다. React Router는 페이지를 새로 고치지 않고도 URL 변경 사항을 처리하고 적절한 구성 요소를 렌더링합니다.

경로 매개변수
매개변수를 사용하여 경로를 정의하여 동적 데이터를 전달할 수도 있습니다. 예를 들어, URL의 사용자 ID를 기반으로 사용자 정보를 표시하는 User 컴포넌트를 만들어 보겠습니다.

1. 사용자 구성요소 생성
User.js:

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userId } = useParams();
    return <h1>User ID: {userId}</h1>;
};

export default User;

2. 라우터 업데이트
App.js에 User 구성 요소에 대한 경로를 추가하세요.

<Route path="/user/:userId" component={User} />

중첩 경로

React Router는 중첩된 경로도 지원하므로 상위 구성 요소 내에서 하위 경로를 렌더링할 수 있습니다. 이는 복잡한 레이아웃을 구축할 때 유용합니다.

중첩 경로의 예:

1. 중첩된 경로를 사용하여 대시보드 구성 요소를 만듭니다.

npm install react-router-dom

1. 대시보드 경로를 포함하도록 App.js를 업데이트하세요.

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

이제 /dashboard/profile 또는 /dashboard/settings로 이동하면 대시보드 내의 각 구성 요소가 렌더링됩니다.

이번 게시물에서는 React Router를 사용하여 React 애플리케이션에서 라우팅을 구현하는 방법을 살펴보았습니다. 기본 라우팅 설정, 페이지 간 탐색, 경로 매개변수 사용 및 중첩 경로 생성에 대해 다루었습니다.

이러한 개념을 사용하면 React 애플리케이션을 위한 구조화된 탐색 시스템을 만들어 사용자 경험을 향상하고 동적 콘텐츠 렌더링을 활성화할 수 있습니다.

다음 게시물에서는 useEffect에 중점을 두고 React Hooks를 사용하는 방법과 기능적 구성 요소의 부작용을 관리하는 방법을 살펴보겠습니다. 계속 지켜봐주세요!

위 내용은 React Router로 탐색하기 React Js Part A React 애플리케이션 라우팅 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!