[React] 페이지 이동(Route, Link...)

Route

• 어느 경로에서 어떤 UI를 보여줄 지 결정할 때 사용한다.
• 특정위치와 매치되는 경우에만 자식 컴포넌트를 렌더링한다.

사용 예시


• 위 코드에서는 / 경로가 Home 컴포넌트와, /about 경로가 About 컴포넌트와, /contact 경로가 Contact 컴포넌트와 매칭된다.
• Route exact path="/" element={< 컴포넌트이름 />} /> 는 React Router의 Route 컴포넌트에서 사용되는 코드이다. 이 코드는 경로(path)가 "/"인 경우에 <컴포넌트이름 /> 컴포넌트를 렌더링하는 것을 의미한다.
• Route path="*" element={< 컴포넌트이름 />} /> 는 "*"와일드카드를 사용하여 모든 경로에 대한 매핑을 설정한 것이다다. 이 매핑은 다른 모든 경로에 매칭되며, <컴포넌트이름 /> 컴포넌트가 렌더링됩니다. 주로 404 페이지를 구현할 때 사용되는 방식이며, 사용자가 알 수 없는 경로에 접속하면 해당 페이지가 나타난다.

Link

• 애플리케이션 내에서 다른 위치로 이동할 수 있는 하이퍼링크를 만든다.
• 페이지를 새로 로딩하지 않고 애플리케이션 내에서 HTML5 History API를 사용하여 브라우저의 URL을 변경한다.

사용 예시


• 위 코드에서는 Link 컴포넌트를 사용하여 /, /about, /contact 경로로 이동하는 링크를 만든다.

Route와 link는 함께 사용되어, 웹 애플리케이션에서 라우팅을 구현하게 됩다.
사용자가 Link를 클릭하여 이동하면, 해당 경로와 매칭되는 Route가 자식 컴포넌트를 렌더링하게 된다.

useNavigate

• React Router v6에서는 useHistory Hook을 제거하고 useNavigate Hook을 도입했다.
• 애플리케이션의 다른 부분으로 이동하거나 뒤로 가거나 앞으로 가기 위한 방법을 제공한다.

사용 예시

• 예를 들어, 로그인 후 사용자를 이전 페이지로 리다이렉트하는 경우