[신세계I&C KDT][React] #49 React.js #4 라우팅 (0704, 0705)

박현아·2024년 7월 5일

React 신세계아이앤씨Kdt

신세계아이앤씨 KDT

목록 보기

54/56

1. 라우팅 기본

1) 참조 사이트

https://reactrouter.com/en/main

2) 설치

npm install react-router-dom
설치 후 package.json에 "react-router-dom": "^6.24.1" 추가됨

3) 프로젝트 생성

(1) 라우팅 1

App.js 수정

import logo from './logo.svg';
import './App.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>안뇽 !!!!!!!!</div> <== JSX
  },
  {
    path: "/xxx",
    element: <div>xxx 안뇽 !!!!!!!!</div>
  },
]);

function App() {
  return (
    <RouterProvider router={router}/>
  );
}

export default App;

(2) 라우팅 2 - 컴포넌트 이용해서 랜더링

Home.js 작성
/로 요청시 < Home /> 랜더링
Products.js 작성
/products로 요청시 < Products /> 랜더링
App.js 수정

const router = createBrowserRouter ([
	  {
	    path:"/",
	    element: <Home />
	  },
	  {
	    path:"/products",
	    element: <Products />
	  },
]);

(3) 라우팅 3 - 컴포넌트간 연결 (링크)

이전 방식은 < a href=""> 사용했으나 React에서는 < Link to=""> 사용함
차이점
- a 태그
전체 페이지가 새롭게 랜더링되기 때문에 네트워크 동작이 발생됨
- Link 태그
  내부적으로 화면을 랜더링하기 때문에 네트워크 동작이 발생안 됨 (크롬 개발자 도구 Network 항목에서 확인 가능)

(4) 라우팅 4 - 메뉴 역할의 컴포넌트 작성

https://reactrouter.com/en/main/start/tutorial#nested-routes

(5) 라우팅 5 - 404 예외 처리 페이지

https://reactrouter.com/en/main/start/tutorial#handling-not-found-errors

현재는 < Link to="">로 사용되어 사용자가 어떤 링크를 선택했는지 모름.
< NavLink>로 사용하면 className 속성에 자동으로 상태를 제공한다. 이 상태값으로 css를 적용할 수 있음

(7) 라우팅 7 - 프로그래밍으로 라우팅 처리

import { Link, useNavigate} from 'react-router-dom';
	function Home(){

	  const navigate = useNavigate();

	   function handleEvent(){
	      navigate("/products");
	   }
    
<button onClick={handleEvent}>products로 가기(프로그래밍)</button>

(8) 라우팅 8 - 동적 라우팅 (파라미터 전달 방법)

1- path variable
: url에 포함되어 파라미터 전달
예> /users/2
{ path : "/users/:id" } // 콜론 사용함 ! (스프링부트에서는 중괄호)
useParams() 이용해서 id값 얻어옴
2- queryString 방식
: url에 포함되지 않고 ?key=value 형식으로 넘겨줌
예> /users?id=2
{ path : "/users" }
useSearchParams() 이용해서 id값 얻어옴

2. 라우팅 심화

1) loader

링크를 통한 컴포넌ㄴ트가 생성되기 전에 실행되고 컴포넌트에 데이터를 전달해서 랜더링함
컴포넌트에서는 useLoaderData() 훅 이용해서 loader 함수가 리턴한 값을 얻음
loader 함수가 리턴하는 loader 데이터는 지정된 컴포넌트 및 하위 컴포넌트에서 사용이 가능하다
params 및 request 파라미터로 PathVariable 및 QueryString 값을 얻을 수 있음
id 사용

path:"/"
component: <RootLayout />
id:'root',
loader:~
childrend:[
	    {
	      path:"/users",
              component:<Users/>
	      loader:~

==> 부모의 loader를 얻기위해서는 id 이용 +  const user = useRouteLoaderData("root");