원글 페이지 : 바로가기
문제발생 리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다. 이유 – 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리 위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다. 그렇다면 라우터는 어떻게 사용할까? 문제해결 1. 라우터 다운로드 npm install react-router-dom 2. index.js 수정 (라우터 적용) import React from “react”;
import ReactDOM from “react-dom/client”;
import { BrowserRouter } from “react-router-dom”; // 라우터 라이브러리 임포트
import “./index.css”;
import App from “./App”;
import reportWebVitals from “./reportWebVitals”;
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(
{/* App 컴포넌트를 BrowserRouter 태그로 감싼다. */}
);
reportWebVitals(); 3. App.js 수정 (라우트 생성) //App.js
import React from “react”;
import { Route, Routes } from ‘react-router-dom’; // 라우터 라이브러리 임포트
import Main from “./components/Main”; // 이동할 컴포넌트 임포트
import Profile from “./components/Profile”; // 이동할 컴포넌트 2
function App() {
return (
<>
{/* 이동할 컴포넌트들 */}
);
}
export default App; //////////참고!
///// Route 사용 방법
////// Route 사용 예시
// 위 예시에서 주소규칙이 /Profile 이므로 을 통해 Profile.jsx 컴포넌트로 이동할 수 있다. 4. 페이지 이동 4.1 Link로 페이지 이동 import React from ‘react’;
import { Link } from ‘react-router-dom’;
const OnSignIn = () => {
return (
);
};
export default OnSignIn;on //////////참고!
///// Link 사용 방법
링크 이름
///// Link 사용 예시
프로필로 이동
// ‘프로필로 이동’ 텍스트를 클릭하면 “/Profile” 주소 규칙으로 설정된 컴포넌트로 페이지를 이동한다. 4.2 useNavigate로 페이지 이동 import React from “react”;
import { useNavigate } from “react-router-dom”;
const OnSignIn = () => {
const navigate = useNavigate(); // useNavigate 훅을 담은 navigate 변수 선언
const signIn = () => {
// 유저 인증이 성공하면 프로필 페이지로 이동
if(userAuth === true)
{
navigate(“/Profile”); // navigate 사용
}
else
{
console.log(“인증 오류”);
}
};
return (
);
};
export default OnSignIn; 필자는 단순히 대체 용도라면 를 권장하지만 인증 등 별도의 처리 후 페이지 이동을 원한다면 useNavigate를 권장한다. 참고자료 < 리액트에서 를 사용하지 않는 이유 > https://velog.io/@yeonsubaek/React-Link-vs-a-tag-ft.-react-router-dom#:~:text=a%20%ED%83%9C%EA%B7%B8%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4,%ED%95%B4%EB%8F%84%20%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%EB%90%98%EC%A7%80%20%EC%95%8A%EB%8A%94%EB%8B%A4. [React] Link vs tag (ft. react-router-dom) react-router-dom을 사용하는데 a 태그를 쓴다고? 🫢 velog.io < 라우터 기본 사용법 > https://velog.io/@brgndy/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95 리액트 라우터 기본 사용법 리액트 라우터는 다양한 경로의 페이지로 이동할때 사용하는 패키지이다. 기존의 페이지 변환 방식은 a 태그를 이용하는 것이었다.하지만 이런 방식을 활용한다면페이지가 늘어나는 만큼 html velog.io < Link 와 useNavigate 차이점 > https://velog.io/@seokkitdo/React-Link-useNavigate [React] Link & useNavigate 리액트에서 화면이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보도록 하겠습니다!라이브러리 설치Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용 velog.io