리액트 페이지간 이동(라우터)

우리는 html을 배울게 a태그로 페이지 이동을 했을것이다.
리액트에서는 라우터라는것을 사용하여 이동을 해야한다.

리액트 생성하는 방법은 VSCode에서 터미널을 열어서 다음과 같이 입력해준다.

• npx creat-react-app <자신이 원하는 파일명>

그러면 설치가 된것을 볼 수 있다.

다음은 우리가 라우터를 사용하기 위해서는 설치가 필요한데

그전에 리액트 파일로 이동해야한다.

터미널에 다음과 같이 입력을 해주어야 한다.

• cd <자신이 만든 파일명>

다음에는 터미널에 다음과 같이 입력을 해준다.

• npm react-router-dom

다음과 같이 입력하면 설치가 완료될것이다.
그러면 우리는 라우터 사용할 준비가 완료되었다 🥳

그럼 우리는 코드를 짜볼것이다.
간단하게 우리는 src 폴더에 MainPage.jsx와 LoginPage.jsx를 만들것이다.
App.js에 다음과 같은 코드를 짜준다.

import { Routes,Route } from 'react-router-dom'
import MainPage from './MainPage';
import LoginPage from './LoginPage';

function App() {
  return (
    <Routes>
      <Route path='/' element={<MainPage/>} />
      <Route path='/login' element={<LoginPage/>} />
    </Routes>
  );
}

export default App;

다음과 같이 짜면 작동이 안될것이다.
이유는 인덱스에 코드를 라우터 지정을 안해줬기 때문이다.
index.js에 다음과 같이 코드를 짜준다.

  <React.StrictMode>
    <App />
  </React.StrictMode>

이 부분을 이렇게 바꿔준다.

  <BrowserRouter>
    <App />
  </BrowserRouter>

그러면 라우터가 정상 작동 할것이다.

서버를 실행하는 법은 터미널에 다음과 같이 입력하면 된다.

• npm start 또는 npm run start를 입력하면 된다.

그러면 우리는 이제 Link라는 태그를 사용해서 페이지 이동을 해볼것이다.

import { Link } from "react-router-dom"

function MainPage(){
    return(
        <div>
            메인페이지 입니다.
            <br />
            <Link to="/login">로그인 페이지</Link>
        </div>
    )
}

export default MainPage

다음과 같은 코드를 짜면 화면에 다음과 같이 나올것이다.

저기에 있는 로그인 페이지를 누르면 주소창이 "localhost:3000/login"으로 바뀐것을 볼 수 있다.

그럼 우리는 라우터 사용하는 법을 배운것이다.