리액트 Routing으로 페이지 이동하는 법

리액트에서 라우팅 방식은 좀 다르게 된다. 

리액트는 SPA, 즉 단일 페이지인 html 하나로 돌아가게 된다. 그래서 경로 이동에 따라서 Ul을 바꾸고 싶다면 라우팅 기능을 해주는 react-router-dom을 깔아야 한다. npm을 이용해서 깔아주면 된다.

npm install react-router-dom

(참고로 리액트로 안 만들고 일반적인 HTML / CSS / JavaScript으로 만들게 되면 그냥 html 파일을 연동해 주면 끝이다.)

---

// Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './pages/Main';
import Main from './pages/Signup';
import Main from './pages/Home';

const Router = () => {
	return (
		<BrowserRouter>                                    // 1
      <Routes>                                             // 2
        <Route path='/' element={<Main />} />  	   		   // 3
        <Route path='/signup' element={<Signup />} />	   // 4
        <Route path='/signup' element={<Home />} />	   // 5
      </Routes>
    </BrowserRouter>
	);
};

export default Router;

대략적인 Router 컴포넌트의 모습이다.

import 구분을 이용하여

import { BrowserRouter, Routes, Route } from 'react-router-dom';

을 써줘야 하고, 이후

<BrowserRouter>                                  
    <Routes>                                             
       <Route path='/' element={<Main />} />  	   		  
       <Route path='/signup' element={<Signup />} />	   
       <Route path='/signup' element={<Home />} />	  
    </Routes>
</BrowserRouter>

위의 식대로 태그들을 세팅해야 한다.

---

이후 구현은 다음과 같이 구현이 된다.

1. Link 컴포넌트

2. useNavvigate hook 사용

---

둘 중 하나를 사용하면 된다. 근데 이제 상황에 맞게 사용해주면 된다.

1. Link 컴포넌트

// Login.js

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

const Login = () => {
  return <Link to='/signup'>회원가입</Link>;
};

export default Login;

예시 코드는 위와 같다.

심플하다. HTML에서는 a태그로 이동하지만, 리액트에서는 link태그로 이동하게 되는 것이다.

다만, 애플리케이션 내부에서 페이지 전환을 할 때만 link태그를 사용해야 하고, 외부로 이동할 때에 a태그를 사용해야 한다. 이 부분을 조심하자.

2. useNavvigate hook 사용

// Login.js

import React from 'react';
import { useNavigate } from 'react-router-dom';               // 1

const Login = () => {
  const navigate = useNavigate();                             // 2

  const goToMain = () => {                                    // 3
    navigate('/main');
  };

  return (
    <button className='loginBtn' onClick={goToMain}>          // 4
      로그인
    </button>
  );
}

export default Login;

예시 코드는 위와 같다.

뭔가 복잡해 보인다. 사실 useNavigate hook과 link는 "이동"한다는 기능이 별 차이가 없다.

그러나 useNavigate hook은 함수의 호출 형태로 경로 이동을 하기 때문에 "특정한 조건"에서 경로를 이동하게 만들 수 있다. 쉽게 말하자면 조건부를 달아줄 수 있는 것이다.

// 실제 활용 예시

const goToMain = () => {
	  if(response.message === 'valid user'){           
    navigate('/main');
  } else {   
    alert('가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.') 
    navigate('/signup');
  }
}

요약하자면 다음과 같다.

Link 컴포넌트

• 조건없이 페이지 이동
• Menu처럼 바로 페이지를 이동하는 경우

useNavigate hook

• 조건에 따라 페이지 전환
• 버튼 클릭 시 백엔드 API로 데이터 전송하는 작업을 한 뒤 페이지 이동 또는 userData의 인증 혹은 인가가 필요한 경우 등

 

---

관련된 구글링 >

https://velog.io/@jin_h2_/React-%EB%A7%81%ED%81%AC-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-Router-Link-useNavigate-hook

[React] 링크 연결하기 -Router, Link, useNavigate hook

https://code-masterjung.tistory.com/126

[React Native] 내비게이션 및 Hooks 익히기