리액트 기초/Routing

react-router-dom v6

react-router-dom v6 공식문서 ↓↓↓ https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Quick Start Declarative routing for React apps at any scale reactrouter.com react-router-dom v6은 React Hook을 많이 사용하므로 React 16.8 버전이상을 사용해야 한다/ v5에서 사용하던 Switch가 Routes로 변경되었고 exact 옵션 대신 url 뒤에 /*를 붙여서 사용한다 component를 넣어줄 때 component 대신 element를 사용한다 중첩 라우팅이 굉장히 사용하기 편해졌다 v5 사용법 ↓↓↓ https://d..

SPA/라우팅

SPA and Routing Single Page Application. 서버에 넘기는 HTML이 하나뿐이 어플리케이션이다. 전통적인 웹 사이트는 페이지를 이동할 때마다 서버에서 HTML, CSS, JS (정적 자원)을 내려준다면, SPA는 딱 한번만 정적 자원을 받아온다. HTML을 하나만 주는 가장 중요한 이유는 사용성 때문이다. 페이지를 이동할 대마다 서버에서 주는 HTML로 화면을 바꾸면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오기 때문에 비효율적일 수도 있다. 하지만, 단점이 없는 것은 아니다. SPA는 딱 한 번만 정적 자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다. 즉, 사용자가 방문하지 않을 수도 있는 페이지까지 전부 가지고 온다. 더욱이, 한 번에 모든 페이지를 가지고..

history.push VS window.location.href

공통점 url이 변경되어 다른 페이지로 이동한다. 차이점 HTTP 요청 history.push ❌ window.location.href ⭕ 새로고침 history.push ❌ window.location.href ⭕ Application 상태 유지(리액트 state 등) history.push ⭕ window.location.href ❌ 사용법 history.push('/'); window.location.href = '/'; url 변경, 페이지 이동시에 새로고침이 필요한 경우는 window.location.href를 사용하자!

react-router-dom v5

react-router-dom v5 아래 명령어를 통해 react-route-dom을 설치하고 여기를 들어가서 공식문서를 확인해보자. npm i react-router-dom@5.3.0 아래 순서를 따라서 라우팅을 처리하자. 1. index.js에 BroweserRouter 적용하기 BrowserRouter는 웹 브라우저가 가지고 있는 주소 정보를 props로 넘겨주는 역할을 한다. 현재 내가 어느 주소를 보고 있는 지 쉽게 알려준다. index.js import React from 'react'; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import './index.css'; import App..