728x90

1. React에서 router사용하기

리액트는 페이지가 하나인데 어떻게 여러개의 페이지를 보여줘야 할까?

페이지도 컴포넌트, 하위 컴포넌트들을 모아서 페이지의 형태로 구성을 하고

페이지 컴포넌트를 url의 경로에 맞춰서 보여주면 된다.

한페이지에 내용이 교체되면서 페이지가 이동된것처럼 보여주는 것이다.

리액트는 새로고침되지 않는 어플리케이션이기 때문에 리액트의 페이지 이동은 눈속임이다.

 

리액트 라우터 라이브러리가 해주는일 : url이 바뀔때 컴포넌트를 바꿔줌

 

router 설치 https://reactrouter.com/en/v6.3.0#welcome-to-react-router

 

Docs Home v6.3.0

Official assets for things like articles and video tutorials.

reactrouter.com

 

설치 명령어

npm install react-router-dom@6

index.js에서

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

2. index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

BrowserRouter를 import해주고 컴포넌트를 감싸면 안에있는 컴포넌트가 라우터 기능을 사용할수 있다.

 

3. App.js

import "./App.css";
import { Routes, Route } from "react-router-dom";

import { Main, Login, Shop, Detail } from "./page";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<Login />} />
        <Route path="/shop" element={<Shop />} />
        <Route path="/detail/:id/:num/:name" element={<Detail />} />
      </Routes>
    </div>
  );
}

export default App;

위와 같이 Route 태그에 path를 설정하여 경로를 정하고 element에 컴포넌트를 넣어 사용할수 있다.

 

4. 컴포넌트 예시

(1) page/Main.js

import React from "react";
import { Header, Body } from "../com";
const Main = () => {
  return (
    <div>
      <Header title="메인페이지" />
      <Body path="/login" name="로그인" />
    </div>
  );
};

export default Main;

(2) com/Header.js

import React from "react";

const Header = ({ title }) => {
  return <div className="header">{title}</div>;
};

export default Header;

(3) com/Body.js

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

const Body = ({ path, name, item }) => {
  const nav = useNavigate();
  return (
    <div className="body">
      <Link to={path}>{name}페이지로 이동</Link>
      <button
        onClick={() => {
          nav(path);
        }}
      >
        이건 {name}으로 이동 버튼
      </button>
      {item?.id ? <div>{item.id}번 상품</div> : null}
      {item?.num ? <div>{item.num}개</div> : null}
      {item && item.name ? <div>상품명 : {item.name}</div> : null}
    </div>
  );
};

export default Body;

Link : 리액트에서 a태그같은 역할을 해준다.

Link 컴포넌트를 이용해서 경로를 바꿔주고 컴포넌트를 교체해서 보여준다.

Link에 필요한 props는 to : to이름의 props에 이동할 경로를 넣어준다.

(4) page/Detail.js

import React, { useState } from "react";
import { Header, Body } from "../com";
import {
  Link,
  useParams,
  useSearchParams,
  useLocation,
} from "react-router-dom";

const Detail = () => {
  const [search, setSearch] = useState("");
  const params = useParams();
  const location = useLocation();
  const [query, setQeury] = useSearchParams();
  console.log(query.get("q"));
  const keyInput = (e) => {
    setSearch(e.target.value);
  };
  return (
    <div>
      <Header title="상세페이지" />
      <div>{search}</div>
      <div>검색 값 : {query.get("q")}</div>
      <input onChange={keyInput} />
      <Link to={location.pathname + "?q=" + search}>검색하기</Link>
    </div>
  );
};

export default Detail;

파라미터 값을 가져오기 위한 방법

리액트에서 지원해주는 유용한 함수는 리액트 훅이다.

리액트 훅 함수 useParams를 사용해서 작업할 수 있다.

url에 경로에 있는 파라미터들을 객체의 형태로 불러올수 있다.

uesParams 함수를 실행해주고 반환된 객체를 가지고 동작한다.

 

검색 쿼리문

검색하려면 input입력창이 있어야 한다. 

입력했을때 값을 저장해놓고 useState로 들고 있어야 한다.

input value를 useState값에 넣어놓고 입력한 값을 언제든 사용할수 있다.

 

검색 쿼리문 만들기

useSearchParams 함수를 실행해서 반환받은 객체를 사용한다.

?뒤에 키값을 기준으로 ?q=1 이런 형태는 q라는 키값이 객체형태로 나온다 {q : 1}

 

 

728x90

'개발 > React' 카테고리의 다른 글

[React] Redux  (1) 2022.10.04
[React] 게시판 만들기  (0) 2022.09.26
[React] 가위바위보 만들기  (0) 2022.09.19
[React] 함수형 useEffect  (0) 2022.09.19
[React] 클래스형 컴포넌트  (2) 2022.09.19

티스토리툴바