URL React Router에 매개변수를 추가하는 것과 관련된 주요 문제는 사용자가 매개변수를 쉽게 조작할 수 있다는 것입니다. 악의적인 사용자가 잠재적으로 매개 변수를 사용하여 승인되지 않은 리소스나 데이터에 액세스할 수 있으므로 보안 문제가 발생할 수 있습니다. 또한 매개변수 값이 제대로 검증되지 않으면 응용 프로그램에서 예기치 않은 동작이 발생할 수 있습니다. 마지막으로 너무 많은 매개변수를 추가하면 URL의 복잡성 증가로 인해 성능 문제가 발생할 수 있습니다.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
<Router>
<Route path="/user/:username">
<User />
</Route>
<Link to="/user/john">John</Link>
function User() {
let { username } = useParams();
return (
<div>{username}</div> // renders 'john' when the link is clicked.
);
}
</Router>
1. "react-router-dom"에서 { BrowserRouter as Router, Route, Link, useParams } 가져오기;
// 이것은 이 코드에서 사용될 react-router-dom 라이브러리에서 구성 요소를 가져옵니다.
2.
3.
4.
5. John // 이것은 /user/john 라우트에 대한 링크를 생성하여 클릭했을 때 사용자 이름 매개변수로 'john'을 사용하여 User 구성 요소를 렌더링합니다.
6. function User() { //위의 링크를 클릭하여 호출하면 사용자 이름을 인수로 받아 div 태그 내부에 렌더링하는 기능 구성 요소입니다.
7. let { 사용자 이름 } = useParams(); //destructuring을 사용하여 useParams()에서 사용자 이름에 액세스합니다.
8. 반환 (
); //이 경우에는 'john'이 될 사용자 이름으로 전달된 모든 값을 포함하는 div 요소를 반환합니다.
React 라우터란?
React Router는 React 애플리케이션을 위한 라우팅 라이브러리입니다. 여러 페이지 사이를 탐색할 수 있는 SPA(단일 페이지 애플리케이션)를 만드는 데 필요한 핵심 구성 요소와 기능을 제공합니다. 이를 통해 개발자는 응용 프로그램의 특정 구성 요소에 매핑되는 경로인 경로를 정의할 수 있습니다. React Router는 리디렉션, 동적 경로 일치 및 쿼리 매개변수와 같은 기능도 제공합니다.
URL에 대한 매개변수
React Router의 URL에 대한 매개변수를 통해 개발자는 URL에서 React 구성 요소로 동적 데이터를 전달할 수 있습니다. 이는 URL에 전달된 매개변수를 기반으로 다양한 콘텐츠를 표시하는 데 사용할 수 있는 동적 경로를 만드는 데 유용합니다. 예를 들어 "/user/:id"와 같은 경로를 사용하여 URL에 전달된 id 매개변수가 있는 사용자 프로필 페이지를 표시할 수 있습니다. URL의 동적 데이터가 필요한 데이터 또는 기타 작업을 필터링하는 데 매개변수를 사용할 수도 있습니다.
React에서 URL에 매개변수를 추가하는 방법
React Router의 URL에 매개변수를 추가하는 것은 "params" 객체를 사용하여 수행됩니다. 이 개체를 사용하면 URL에 추가될 키-값 쌍을 전달할 수 있습니다. 매개변수를 추가하려면 다음과 같이 params 객체에 추가하기만 하면 됩니다.
const params = { param1: 'value1', param2: 'value2' };
그런 다음 경로를 만들 때 다음과 같이 params 개체를 인수로 전달할 수 있습니다.
그러면 이 경로로 이동할 때 매개변수가 URL에 추가됩니다.
