리액트 3일차 : useNavigate, react-route-dom

<오늘>

useNavigate훅
react-route-dom
styled-components
useEffect ... return... setTimeout

 

 

* react-route-dom

기본적으로 웹페이지는 내부에서 url을 요청할 때 페이지를 새로고침한다.

이는 화면 모든 부분을 리로드하므로 시간이 오래 걸림

SPA는 변경된 컴포넌트만 라우팅하여 부분적으로 렌더링해야 하므로

이를 위해 react-route-dom을 사용한다.

 

npm install react-route-dom@6

6버전을 깔아줌

import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

js에서 상단 내용을 import해줌

 

<Router>

react-router-dom의 라우터는 <BrowserRouter>와 <HashRouter> 두 가지가 있음

브라우저라우터는 html5의 history API를 활용하여 UI를 업데이트하고

해시라우터는 url의 hash를 활용하여, 정적인(static) 페이지에 적합하다.

 

<Route>

요청받은 pathname에 해당하는 컴포넌트를 렌더링한다.

 

<Switch>

path의 충돌이 일어나지 않게 <Route>들을 관리한다.

<Switch>내부에 <Route>들을 넣으면 요청에 의해 매칭되는 라우트들이 다수 있을 때 제일 처음 매칭되는 라우트만 선별하여 실행한다. 또한 라우트 간에 이동 시 발생할 수 있는 충돌도 막아준다.

path와 매칭되는 <Route>가 없을 때에 맨 밑에 default<Route>의 실행이 보장된다.(path속성을 명시하지 않은 <Route>)

 

<Link>

링크를 생성한다.

 

 

실습에서는 편의성을 위하여 index.js에서 App컴포넌트를 라우터로 감싸준다.

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(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// 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에서

      <Routes>
        <Route path='/' element={

          <>
            <div className="home">
              <div className="jumbotron">
                <img src="img/yb1.jpg" className="w-25" alt="모자쓴예삐" />
                <h1 className="display-4">Hello, YEPPIE!</h1>
                <p className="lead">불신이 가득한 703호입니다. 예삐의 모자를 구경하세요.</p>
                <p className="lead">
                  <a className="btn btn-primary btn-lg" href="#" role="button">View more</a>
                </p>
                {
                  flag == true ?
                    <div>
                      <button className="btn btn-danger" bg="#f95959" onClick={() => { console.log("ㅋㅋ구라임") }}>타임 세일</button>
                    </div> : null
                }
              </div>
            </div>


            <Card data={data} />
          </>
        }>
        </Route>

        <Route path='/detail/:id' element={<Detail data={data} />} />
        <Route path='/cart' element={<Cart />} />
        <Route path='/about' element={<About />}>
          <Route path='emp' element={<div>너는 우리 직원이야</div>} />
          <Route path='location' element={<div>혜화역 4번 출구</div>} />
        </Route>
        <Route path='/event' element={<Event />}>
          <Route path='one' element={<div>첫 주문은 1+1입니다.</div>} />

https://codingbroker.tistory.com/72

[react package] 리액트 react-router-dom 사용법 - BrowserRouter, Route, Switch, Link

 

* useNavigate

리액트 라우터 v6에서 새로고침 없이 경로 이동을 하는 방법

1.컴포넌트 내부에서 useNavigate hook을 사용하는 방법

2.useNavigate를 사용할 수 없을 때, Navigation 컴포넌트를 사용하는 방법

 

useNavigate 훅

useNavigate()를 호출하면, 경로 이동 처리를 할 수 있는 "함수"를 반환한다.

이 함수를 이용해 뒤로 이동, 경로 이동 등을 처리하면 된다.

replace 옵션을 통해 history에 이력을 남길지 여부를 설정할 수 있다.

 

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

export default function Test() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={()=>{navigate(-1)}}>history 뒤로 이동</button>
      <button onClick={()=>{navigate("/admin")}}>절대 경로 이동</button>
      <button onClick={()=>{navigate("../content")}}>상대 경로 이동</button>
      <button onClick={()=>{navigate("/admin", { replace: true })}}>history 이력 안남김</button>
    </div>
  );
}

위와 같이 사용한다.

 

실습 코드

import {React, useEffect, useState} from 'react'
import { useParams, useNavigate } from 'react-router-dom';

function Detail(props) {
    
    let {id} = useParams(); //HOOK
    let findId = props.data.find((item) => item.id == id);
    const navigate = useNavigate();
    let [count, setCount] = useState(0);
    const [flag, setflag] = useState(true);
    
    return (
        <>
        <div className='container'>
                <div className='row'>

                  <div className='col-md-6'>
                    <img src={findId.img} className='img-fluid' alt='yb'/>
                    <h4>{findId.title}</h4>
                    <p>{findId.content}</p>
                    <p>{findId.price}원</p>

                    <button className="btn-danger">주문하기</button>
                    <button className='btn-warning' onClick={ () => {navigate(-1)} } >뒤로가기</button>
                    <button className='btn-primary' onClick={ () => {navigate('/')} } >홈</button>
                    <button className='btn-dark' onClick={ () => {navigate('/cart')} }>장바구니</button>

                  </div>
                </div>
              </div>
        </>
    )
}

export default Detail;

https://curryyou.tistory.com/476

[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용

 

 

*useParams

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하기 위한 훅

    let {id} = useParams(); //HOOK

Detail.js는 파라미터에 따라 다른 상품을 보여준다. 따라서 위와 같이 useParams를 써두고,

부모 컴포넌트인 App.js에서는

 

<Route path='/detail/:id' element={<Detail data={data} />} />

 

위와 같이 파라미터에 따라 다른 페이지를 보여준다.

 

 

 

 

*useEffect

컴포넌트가 렌더링 될 때 특정 작업을 수행하게 하는 훅.

클래스형 컴포넌트에서의 생명주기메소드를 함수형 컴포넌트에서도 쓸 수 있게 됨

useEffect(effect, [, deps]);

사용법은 위와 같다.

effect : 렌더링 이후 실행할 함수. effect함수에서 함수를 return할 때에는, 컴포넌트가 unmount(소멸)될 때 실행 된다.

[deps] : 배열의 형태로, 이 값이 변경될 때에만 함수가 실행되도록 한다. 빈 배열을 입력할 경우 컴포넌트가 Mount될 때만 실행된다. 생략해둘 경우에는 컴포넌트가 리렌더링 될 때마다 호출된다.

 

https://goddaehee.tistory.com/308

[React] 7. React hooks[2] - useEffect란?