10/6- react

[라우터(Router)]

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

[리액트는 한개의 페이지]

Single Page Applicatin

 

[눈속임으로 여러 페이지처럼 구현 -> spa의 장점은 그대로 유지]

 

[React Router 설치]

npm install react-router-dom

1.설치 - npm 설치는 프로젝트 단위 - 내가 새로운 프로젝트를 설치한다면 다시 설치 npm install react-router-dom => npm i react-router-dom 대체 가능 Q.yarn? npm 대체  ex) yarn add react-router-dom + npm 2. index.js에서 전체 App을 BrowserRouter로 감싸줄 것!     2-1. import{BrowserRouter}from 'react-router-dom'     2-2. <BrowserRouter>                  <App/>            <BrowserRouter>

 

 

[Link Component]

a태그는 클릭 시 새로운 페이지를불러오기 때문에 Link 컴포넌트를 대신 사용한다

>> History API를 통해 브라우저 주소의 경로만 바꾸는 역할

여기까지 정리!!!!!!!!!!!!!

---

 

useNavigate : React hooks 중 하나로, 페이지 이동을 도와주는 함수

 

1) 설치 - npm i react-router-dom 프로젝트 단 2) <BrowserRouter></BrowserRouter>      History API 관리 => 가장 초기에 세팅해두어야 하는 것 3) <Routes> <Routes>     => 많은 Route 중, 조건에 맞는 Route만 보여주는 기능 4) <Route> </Route>      => 필수 속성: path, element      => path: 경로, element: 컴포넌트 5) <Link></Link>       => 브라우저 주소값 변경 => 이동       => 필수 속성 to = '이동할 경로' 6) useNavigate() => 페이지 이동을 도와주는 함수 ** Navigate에 조건? => 삼항연산자 7) useParams() - 라우터 사용시 parameter 정보 - <Route path = '/product:파라미터이름'></Route> - 사용자 => localhost:3000/product5 - 컴포넌트 => - import - let {파라미터 이름}= useParams() - 상품 상세 페이지(예를 들어 상품이 100만개라면?) 8) useSearchParams() - 쿼리 정보  - 여러 값을 사용 가능(조건: url 안에 작성) - 사용자 => localhost:3000/product?쿼리이름=쿼리값 & 쿼리이름2= 쿼리값2 - 컴포넌트 => - import                        - const [query,setQuery]=useSearchParams()                        - query.get('쿼리이름')                         - query.get('쿼리이름2')

추가로 필요한 페이지
1) MyPage.js : 유저들의 정보를 알려줌
- <h3>유저 정보입니다. </h3>
- '메인으로 돌아가기' 버튼
- localhost:3000/mypage 2) Product.js : 상품을 보여줄 페이지
- <p>1번째 상품 페이지입니다.</p>
- '메인으로 돌아가기' 버튼
-localhost:3000/product 3) Main.js
- 마이페이지 링크
- 상품페이지 링크

 

언제 Link를 쓰고, 언제 useNavigate를 쓸까?

클릭 시 바로 이동해야 하는 로직 구현 => Link

 

useParams : 라우터 사용 시 Parameter 정보를 가져와 사용하고 싶을 때 쓰는 React hooks

 

useSearchParams

라우터 사용시 QueryString 정보를 가져와 관리하고 싶을 때 쓰는 React hooks

 

---

[페이지 실습]

<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>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<App.js>

import './App.css';
import {Routes, Route} from 'react-router-dom'
import Main from './components/Main';
import About from './components/About';
import Mypage from './components/Mypage';
import Product from './components/Product';

function App() {
  return (
    <div>
      <h1>Welcome to React Router!</h1>
      {/* Routes: 여러 Route 들을 감싸서 그 중 요청된 라우트 하나만 렌더링 해준다 
        Q. Switch : Routes의 예전 방식!
      */}
      <Routes>
        {/* Route 필수 속성 2가지: path(경로), element(컴포넌트) */}
        <Route path='/' element={<Main/>}></Route>
        <Route path='/about' element={<About/>}></Route>

        {/* 로그인 상태에 따라 다르게 처리 */}
        <Route path='/mypage' element={<Mypage/>}></Route>

        {/* url 파라미터를 이용 useParams() */}
        <Route path='/product:num' element={<Product/>}></Route>
      </Routes>
    </div>
  );
}

export default App;

<Main.js>

import React, { useState } from 'react'
import {Link,useNavigate} from 'react-router-dom'

const Main = () => {
    const navigate = useNavigate()
    
    const[userState, setUserState] = useState(true)
    const goToMyPage =() => {
        //login 상태면 mypage로 이동, 그렇지 않으면 about으로 이동

        userState == true ? navigate('./mypage') : navigate('/about')
    }
  return (
    <div>Main
        <br></br>
        {/* Link Component
        - 브라우저 주소를 바꿔주는 역할 
        - 실제로 페이지를 불러오지는 않는다 (a태그와의 차이)
        */}
        <Link to='./about'>About으로 이동</Link>
        <br></br>
        <Link to= './product50'>상품페이지로 이동</Link>

        <br></br>
        <button onClick={goToMyPage}>마이페이지로 이동</button>
    </div>
  )
}

export default Main

<Product.js>

import React from 'react'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'

const Product = () => {
    
    const navigate = useNavigate()
    
    const goToMain=() => {
        navigate('/')
    }

    // 1. useParam()
    // url의 파라미터 정보를 가져올 수 있다

    // a. <Route path = '/페이지이름: 파라미터정보'>
    // b. 컴포넌트 => let {피라미터정보} = useParams()
    // 한가지 정보만 사용 가능
    // 예) 많은 상품의 상세 페이지

    let {num} = useParams()
    console.log('num: ',num)


    // 2. useSearchParams()
    // url의 쿼리 값을 가져와서 사용
    // 여러 값을 사용 가능
    // 예) 검색기능, 필터링 기능

    const [query, setQuery] = useSearchParams()
    console.log('이 제품의 가격은', query.get('price'))
    console.log('이 제품의 종류는', query.get('type'))
    return (
    <div>
        <p> {num}번째 상품 페이지 입니다.</p>
        <p>가격 : {query.get('price')}</p>
        <p>종류: {query.get('type')}</p>
        <button onClick={goToMain}>메인으로 돌아가기</button>
    </div>
  )
}

export default Product

<About.js>

import React from 'react'

import { useNavigate } from 'react-router-dom'

const About = () => {

    const navigate = useNavigate()

    //useNavigate : 페이지 이동을 도와주는 React hooks
    const goToMain = () => {
        navigate('/')
    }


  return (
    <div>About
        <br></br>
        <button onClick={goToMain}>Main으로 이동</button>
    </div>
  )
}

export default About

<Mypage.js>

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Mypage = () => {

    const navigate = useNavigate()

    const goToMain=() => {
        navigate('/')
    }

  return (
    <div>
        <h3>유저 정보입니다.</h3>
        <button onClick={goToMain}>메인으로 돌아가기</button>
    </div>
  )
}

export default Mypage

---

 

경로 사용 방법

1) npm install react-router-dom(프로젝트 단위로 설치!!)

하위 각각 작업들 전부 import 처리

 

2)<BrowserRouter></BrowserRouter>

3) <Routes>,<Route>

4) detail 3 => 몇번째 게시글? 배열의 인덱스

5) ? title = 텐트팝니다&price=3000 => query