[React] React라우터

😺 React 라우터에 대해 알아보기 전에 SPA 의 개념에 대해 알아보자.

 

📍 SPA란? (single page application)

하나의 페이지로 만들어진 어플리케이션을 의미한다.

전통적인 방식은 Server가 html 파일 만들고 data 실어서 응답하지만,

spa 방식은 클라이언트에 html 세워두고 데이터만 요청응답을 통해 바꾼다.

 

 

1. SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다.
2. 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다.
3. 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다.

 

📍 SPA의 단점 (CSR방식)

• 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩니다.
• 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 됩니다.
• 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요)

 

---

 

 

😺 이제 라우팅에 대해 알아보자.  !

 

 

📍  라우팅이란?

• 브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것을 라우팅이라고 합니다.

 

📍  사용이유

• create-react-app로 프로젝트를 생성하게 되면 기본적으로 SPA에 CSR(클라이언트 렌더링) 입니다.
• 하나의 페이지만 사용하게 되는 것입니다.
• SPA이지만 라우터를 활용해서 사용자로 하여금 여러 페이지가 존재하는 것처럼 느껴지게 할 수 있습니다.

 

---

 

😺 라우터는 설치해서 사용해야한다!

 

📍 리액트 라우터 설치 방법

 

 

1.라우터를 적용할 프로젝트 생성

npm create react-app 프로젝트명

 

2.라우터 설치

npm install react-router-dom

 

3. 프로젝트 시작

npm start

 

 

 

 

📍  라우터 적용하기

1. 라우터를 사용할때는 root app 최상위 컴포넌트 index.js에서 App컴포넌트를 <BrowserRouter>로 감싸줍니다.
2. 페이지 컴포넌트 만들기
3. App컴포넌트에서 <Routes>를 사용해서 분기하기
4. 주소요청을 통해 확인하기

 

---

 

😺 라우터 종류는 어떤 것이 있을까?

 

 

• <Routes>: 모든 Route 컴포넌트를 감싸는 컨테이너 컴포넌트입니다. Route 컴포넌트는 자식으로 받아서 라우팅을 정의합니다.
• <Route>: 경로와 해당 경로에 렌더링할 컴포넌트를 정의합니다. 중첩 라우트를 지원하며, element 속성으로 렌더링할 JSX 요소를 전달합니다.
• <Navigate>: 페이지를 리다이렉트하는 컴포넌트입니다. to 속성으로 이동할 경로를 지정하고, replace 속성으로 현재 페이지를 교체할 수 있습니다.
• <Link>: 페이지 간 네비게이션을 위한 링크를 생성합니다. to 속성으로 이동할 경로를 지정합니다.
• <NavLink>: 활성 링크 스타일링을 지원하는 링크 컴포넌트입니다. to 속성으로 이동할 경로를 지정하고, isActive 속성으로 활성 상태에 대한 스타일을 적용할 수 있습니다.
• <Outlet>: 중첩 라우트의 자식 컴포넌트가 렌더링되는 자리입니다. 부모 라우트의 컴포넌트 내에서 사용됩니다.
• useNavigate: 프로그램적으로 네비게이션을 처리하는 훅입니다. navigate 함수를 호출하여 페이지를 이동합니다.
• useParams: URL 파라미터를 가져오는 훅입니다. URL에서 동적으로 값을 읽어올 수 있습니다.
• useLocation: 현재 위치 정보를 제공하는 훅입니다. 현재 URL, 검색 파라미터, 상태 등을 가져올 수 있습니다.
• useSearchParams: 쿼리 문자열의 검색 파라미터를 가져오고 설정하는 훅입니다.

 

 

 

---

 

<Link> 를 이용해서 다른 페이지로 이동

 

 

[App.js]

import {Route, Routes} from 'react-router-dom';
import Home from './component/Home';
import Info from './component/Info';
import User from './component/User';
import Board from './component/Board';
import BoardContent from './component/BoardContent';
import Header from './layout/Header';
import MyPage from './component/MyPage';

function App() {
  return (
    // 중첩라우터
    <Routes>

      <Route  element={<Header/>}> 
      <Route path='/' element={<Home/>} />
      <Route path='/info/:num' element={<Info/>} />
      <Route path='/user' element={<User/>} />
      </Route>
      
      {/* <Route path='/board' element={<Board/>} />
      <Route path='/board/:num' element={<BoardContent/>} /> */}

      {/* 중첩 라우터 */}
      <Route path='/board' element={<Board/>}>
        <Route path=':num' element={<BoardContent/>} />
      </Route>

      {/* navigation 컴포넌트 */}
      <Route path='/mypage' element={<MyPage/>} />
        


    </Routes>
  );
}

export default App;

 

 

[home.js]

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


function Home() {

  return (
    <div>
      <h3>홈페이지 입니다</h3>  
      <Link to='/user?name=홍길동&age=20'>user페이지</Link>
      <br/>
      <Link to='/info/1'>info페이지</Link>
      <Link to='/info/2'>info페이지</Link>
      <Link to='/info/3'>info페이지</Link>


    </div>
  )
}

export default Home;

 

• <Link> 컴포넌트: React Router에서 제공하는 컴포넌트로, SPA(Single Page Application)에서 페이지 새로고침 없이 다른 페이지로 이동할 수 있게 해줍니다.
• to='/info/1': to 속성은 이동할 대상 경로(URL)를 정의합니다. 이 경우, 링크를 클릭하면 /info/1 경로로 이동하게 됩니다.

 

 

 

 

---

 

URL 파라미터와 쿼리스트링

 

 

😺 값을 넘겨주는 방식은 url파라미터 , 쿼리스트링이 있다.

 

같은 컴포넌트라도 전달되는 데이터에 따라서 다른 내용을 보여줘야 하는 경우가 있습니다.

EX) 글 상세

이 때 URL주소의 매개변수를 전달 할 수 있고, 컴포넌트는 그 값을 받아서 사용 할 수 있습니다.

 

 

😺 쿼리스트링 ( /경로?키=값&키=값)

• 쿼리스트링은 주소의 ? 뒤에 키=값 의 형태로 넘어가는 매개값입니다.
• 별도의 라우터 설정은 하지 않아도 됩니다.
• 컴포넌트에서는 useLocation() 훅 or useSearchParams() 훅을 사용 해서 쿼리스트링을 받을 수 있습니다.

 

 

😺 링크에서

 

📍  /경로?키=값&키=값

      <Link to='/user?name=홍길동&age=20'>user페이지</Link>

 

 

😺컴포넌트에서

 

📍 useLocation() 훅

const location = useLocation();

 

• useLocation() 훅 : React Router에서 현재 URL에 대한 정보를 제공하는 훅
• pathname: 현재 경로 (예: /info/1)
• search: 쿼리 문자열 (예: ?name=John&age=30)
• hash: URL의 해시 부분 (예: #section1)
• state: Link 컴포넌트를 사용해 경로를 변경할 때 전달한 상태 객체

 

 

 

📍  useSearchParams() 훅

const [객체, function] = useSearchParams()

• 배열을 반환합니다.
• 첫 번째 요소는 쿼리파라미터를 조회하거나 수정하는 get, set이 담긴 객체
• 두 번째 요소는 쿼리파라미터를 객체로 업데이트 하는 함수 반환

 

• useSearchParams() 훅 : React Router에서 URL의 쿼리 문자열(search parameters)을 읽고 설정하기 위해 사용하는 훅(Hook)
• [searchParams, setSearchParams]의 형태로 값을 반환 !
• searchParams.get('query'): query라는 이름의 쿼리 파라미터 값을 가져옵니다

    const [obj, setObj] = useSearchParams();
    let id = obj.get("id");//request.getParameter("키")
    let key = obj.get("key");

 

 

 

😺 URL파라미터 (/경로/값/값) 👍

• URL파라미터는 주소 뒤에 /경로/값/값 의 형태로 넘어가는 매개값입니다.
• 라우터에 추가적인 설정이 필요합니다. ( /주소/:키 )
• 컴포넌트에서는 useParams() 훅을 사용하여 URL파라미터를 받을 수 있습니다.

 

😺 라우터에서

  <Routes>
        .....
        <Route path='/info/:num' element={<Info/>}/>
    </Routes>

 

 

😺링크에서

<li><Link to='/info/1'>1번 info</Link></li>

 

 

😺컴포넌트에서 

 

📍 useParams() 훅

/param에는 link로 넘어온 키가 담겨 있습니다.

let param = useParams();

 

 

---

중첩라우터로 공통 부분 처리하기

 

😺 중첩 라우터를 사용하면 공통 부분을 처리할 수 있게된다. 

• 글페이지가 있고, 글에 따른 상세화면이 있다고 가정해 봅시다.
• 라우터의 설정은 아래 처럼 보여질 수 있습니다.
• 아래 설정은 두 라우터가 다르기 때문에 각각 다른 화면이 보입니다.

 

 

😺  중첩 라우터를 사용하면 라우트 내에 다른 라우트를 정의할 수 있어

복잡한 URL 구조를 효율적으로 관리할 수 있다 !

 

• <Routes>: 모든 라우트를 감싸는 컨테이너 컴포넌트입니다. Route 컴포넌트를 자식으로 받아 라우팅을 설정합니다.
• <Route>: 경로와 해당 경로에 렌더링할 컴포넌트를 정의합니다. 중첩된 Route를 사용하여 하위 라우트를 정의할 수 있습니다.
• element: 렌더링할 컴포넌트를 지정합니다. JSX 요소를 전달합니다.
• path: 라우트 경로를 지정합니다. 중첩 경로는 부모 Route의 경로를 기반으로 합니다.
• <Outlet>: 중첩된 라우트의 콘텐츠가 렌더링되는 자리입니다. 부모 라우트의 컴포넌트 내에 위치합니다.

 

 

 

📍 중첩라우터

 

Routes와 Route를 사용하여 복잡한 라우트 구조를 구성할 수 있으며, 중첩된 Route는 부모 라우트의 콘텐츠 내에 자식 콘텐츠를 렌더링

 

• <Outlet>: 중첩된 경로의 콘텐츠가 렌더링될 위치를 정의합니다.
• 동적 경로: URL 파라미터를 사용하여 동적으로 경로를 처리할 수 있습니다.

<Routes>
	<Route path='/board' element={<Board/>}/>
	<Route path='/board/:num' element={<BoardContent/>}/>
</Routes>

 

 

• 만약 Board 목록 페이지를 공통으로 사용하고 상세페이지를 서브로 보여주도록 처리하려면 중첩라우터를 활용할 수 있습니다.
• 중첩라우터로 적용되면 부모컴포넌트에서 <Outlet> 컴포넌트를 활용해서 하위 라우터를 보여지게 할 수 있습니다.

<Routes>
	<Route path='/board' element={<Board/>}>
		<Route path=':num' element={<BoardContent/>}/>
	</Route>

</Routes>

 

 

 

 

 

---

라우터 부가 기능 (Link, Navigate)

😺   NavLink 컴포넌트

• 링크에서 사용하는 경로가 라우터의 경로와 일치하면 특정스타일을 적용 (활성화기능)

• NavLink는 링크의 경로가 라우터의 경로와 일치하면 특정스타일을 적용해 줍니다.
• NavLink는 style속성을 제공합니다
• style속성에는 실행시킬 함수를 작성합니다.
• 이 함수에 매개변수로 {isActive : boolean}객체를 넣어주는데, 활성화 여부를 표시가 가능합니다.
• 사용은 반드시 {isActive}변수로 구조분해할당 합니다.

📍 Link
Link는 기본적인 네비게이션을 구현하는 데 사용

 

📍   NavLink
NavLink는 Link의 확장으로, 현재 페이지와의 일치 여부에 따라 동적으로 스타일을 적용할 수 있는 기능을 제공

 

 

 

 

 

 

😺 useNavigate() 훅 vs Navigate 컴포넌트

 

 

 

📍 useNavigate() 훅

let navigator = useNavigate();

• JS의 history객체를 대신합니다.
• 이벤트에서 사용
• useNavigate훅 은 특정 event가 발생할 때, url을 조작할 수 있는 함수를 제공합니다.
• react v6 에서 useHistory 가 변화한 것입니다. (JS의 history객체를 대신 합니다)
• JS의 history를 다루는 기능도 제공합니다.

 

• 호출 위치: 함수형 컴포넌트 내에서 호출합니다
• 사용 방법: 네비게이션 함수를 사용하여 프로그래밍적으로 이동합니다.
• 장점: 사용자 인터랙션(버튼 클릭 등)과 같은 이벤트에서 네비게이션을 수행할 때 유용합니다

 

 

📍   Navigate 컴포넌트

 

• 리다이렉트기능
• 렌더링시에 사용

• <Navigate> 컴포넌트는 렌더링 될 때 현재 위치를 변경합니다. (렌더링 중 만나게 되면, 페이지를 강제로 이동시킴)
• useNavigate()훅과 비슷해보이지만 useNavigate()훅은 렌더링 과정에 사용할 수 없습니다.

 

• 호출 위치: JSX 내에서 직접 렌더링합니다.
• 사용 방법: 컴포넌트가 렌더링될 때 자동으로 페이지를 리다이렉트합니다.
• 장점: 조건부 리다이렉션이나, 렌더링 시점에서 네비게이션을 구현할 때 유용합니다.
• to: 이동할 경로를 지정합니다. 문자열 또는 경로 객체를 사용할 수 있습니다.
• replace: true로 설정하면 현재 페이지를 히스토리 스택의 최상위에서 교체합니다. 이는 브라우저의 "뒤로 가기" 버튼을 사용하여 이전 페이지로 돌아갈 수 없게 만듭니다. 기본값은 false입니다.
• state: 이동할 페이지에 상태 객체를 전달할 수 있습니다. 이 상태는 location.state를 통해 접근할 수 있습니다

 

 

 

---

[user.js]

import { useSearchParams } from "react-router-dom";



function User() {

  //1. useLocation훅을 사용
  // const location = useLocation();
  // const {search, pathname} = location;
  // console.log(search);
  // console.log(pathname);
  
  //2. useSearchParams훅을 사용
  const searchParam = useSearchParams();
  console.log(searchParam);

  const [obj, setObj] =  useSearchParams();
  console.log(obj);
  console.log(setObj);
  let name = obj.get("name");
  let age = obj.get("age");
  console.log(name, age);
  
  const handleClick = () => {
    setObj({name : '이순신', age : 30}); // 갑 변경하기
  }

  return (
    <div>
      <h3>유저페이지 입니다</h3>
      <button onClick={handleClick}> uri 값 변경 </button>
    </div>
  )
}

export default User;

• useLocation() 훅 : React Router에서 현재 URL에 대한 정보를 제공하는 훅

 

 

//2. useSearchParams훅을 사용
  const searchParam = useSearchParams();
  console.log(searchParam);
  
  const [obj, setObj] =  useSearchParams();
  console.log(obj);
  
  let name = obj.get("name");
  let age = obj.get("age");
  console.log(name, age);

 

• useSearchParams() 훅 : React Router에서 URL의 쿼리 문자열(search parameters)을 읽고 설정하기 위해 사용하는 훅(Hook)
• [searchParams, setSearchParams]의 형태로 값을 반환 !
• searchParams.get('query'): query라는 이름의 쿼리 파라미터 값을 가져옵니다

 

 

  const handleClick = () => {
    setObj({name : '이순신', age : 30}); // 갑 변경하기
  }

• seobj 를 통해서 uri 값을 변경할 수 있다.

 

 

---

 

[info.js]

import { useParams } from "react-router-dom";


function Info() {

  //예시데이터
  const data = {
    "1" : {id:1 , name: "홍길동"},
    "2" : {id:2 , name: "이순신"},
    "3" : {id:3 , name: "신사임당"}
  }


  //useParams훅 - URL파라미터 
  let param = useParams();
  console.log(param);
  console.log(param.num); //찾아서 사용함
  const {id, name} = data[param.num];

  return (
    <div>
      <h3>Info페이지 입니다</h3>
      <div>
        선택된 데이터는 {id}이고 {name}입니다.
      </div>

    </div>
  )
}

export default Info;

 

  const data = {
    "1" : {id:1 , name: "홍길동"},
    "2" : {id:2 , name: "이순신"},
    "3" : {id:3 , name: "신사임당"}
  }

• 키:값{키:값, 키:값} 형태로 들어가있는 data 객체

 

 

  let param = useParams();
  console.log(param);
  console.log(param.num); //찾아서 사용함
  const {id, name} = data[param.num];

• useParams() 훅 : React Router에서 사용되는 훅으로, URL 경로에 포함된 매개변수(params)를 읽는 데 사용
• param.num 의 값과 대응하는 data 키를 찾고 그 값을 해당 항목의 id와 name 속성을 추출

 

 

[info/1]

[info/2]

[info/3]

---

[header.js]

import { Outlet, useNavigate } from 'react-router-dom';
import style from './Header.module.css';


function Header() {

  let nav = useNavigate();

  const goBack = () => {
    nav(-1);
  }

  const goHome = () => {
    nav('/');
  }

  return (

  <>

  <header className={style.wrap}>

      <h3> 헤더입니다. </h3>

      <ul className={style.wrap_list}> 

        <li> 목록 </li>
        <li> 목록 </li>
        <li> 목록 </li>
        <li> 목록 </li>

      </ul>
      <div>
        <button onClick={goHome}> 홈으로 </button>
        <button onClick={goBack}> 뒤로가기 </button>
      </div>


  </header>
  
  <section>
        <Outlet />
      </section>

  </>

  )

}

export default Header;

 

• useNavigate () 훅 : react-router-dom 라이브러리에서 제공하며, 네비게이션(페이지 이동) 기능을 제공
• 이 훅은 네비게이션 함수 nav를 반환
• nav(-1)을 호출하여 브라우저의 히스토리 스택에서 한 단계 뒤로 이동
• nav('/')을 호출하여 애플리케이션의 루트 경로('/')로 이동

 

 

---

[Board.js]

import { Link, NavLink, Outlet } from "react-router-dom";


function Board() {

  const myStyle = {color : "green", backgroundColor: "red"};
  return (
    <>
    <h3> 글 목록 </h3>

    <ul>
      {/* <li><Link to='/board/1'> 1번글 </Link></li>
      <li><Link to='/board/2'> 2번글 </Link></li>
      <li><Link to='/board/3'> 3번글 </Link></li> */}


      <li><NavLink to='/board/1'  style={({isActive}) => isActive ? myStyle : undefined }> 1번글 </NavLink></li>
      <li><NavLink to='/board/2' style={({isActive}) => isActive ? myStyle : undefined }> 2번글 </NavLink></li>
      <li><NavLink to='/board/3' style={({isActive}) => isActive ? myStyle : undefined }> 3번글 </NavLink></li>

    </ul>

{/* 중접 라우터에서 하위 컴포넌트를 표시함  */}
    <Outlet/>

    </>
  )
}

export default Board;

 

 

 

 

 

[BoardContent.js]

import { useParams } from "react-router-dom";

function BoardContent() {

  const {num} = useParams();

  return (
    <>
    <h3> 글 내용~ </h3>
    {num}번 글 입니다. 추후 네트워크 통신 처리함 
    </>
  )
}

export default BoardContent;

 

• {num} : URL 경로에 포함된 매개변수(params)를 읽어옴 

 

style={(isActive)=>{return isActive ? myStyle : undefined ;}}

 

• NavLink는 현재 활성화된 링크를 쉽게 스타일링 가능 !
• isActive : NavLink가 활성화되었는지를 나타내는 부울 값

 

<Outlet/>

• <Outlet />은 React Router에서 사용하는 컴포넌트로, 중첩 라우트를 구현할 때 자식 컴포넌트를 렌더링하는 데 사용

 

 

 

 

---

 

[MyPage.js] 

import { Navigate, useNavigate } from "react-router-dom";

function MyPage() {

  let nav = useNavigate();
  let loginYN = false; // 로그인처리내역관리값

  if(!loginYN){
    nav('/');
    return <Navigate to='/' replace={true}/> 
    // 히스토리를 남기지 않음
    // 뒤로가기를 남기지 않는다
  }


  return (
    <>
    <h3> 권한 있는 유저만 접근 가능 </h3>
    </>
  )
}

export default MyPage;

 

 

 

  if(!loginYN){
    nav('/');
    return <Navigate to='/' replace={true}/> 
  }

 

 

로그인이 되어있지않으면

 

 

 

nav('/') 

홈으로 이동하게된다.