🍎 React Router Dom

페이지를 구현할 수 있게 해주는 패키지

• react-router-dom을 이용하면, SPA 기반 인 리액트 프로젝트 안에서 여러개의 페이지를 구현할 수 있다.
• Router.js에 Router 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import해서 사용한다.
• react-router-dom는 여러가지 훅을 제공한다.

vscode 터미널에서 아래 코드를 입력해 패키지를 설치할 수 있다.

yarn add react-router-dom

🌳 사용방법 순서

• 페이지 컴포넌트 생성(Home.jsx, Detail.jsx.....)
• ⭐ Router.js 생성 및 route 설정 코드 작성
  브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

// BrowserRouter를 Router로 감싸는 이유는,
// SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다
const Router = () => {
	return (
    	<BrowserRouter>
      		<Routes>
              	// path는 사용하고싶은 "주소"
              	// element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트
      			<Route path="/" element={<Home />} />
				<Route path="detail" element={<Detail />} />
      		</Routes>
      	</BrowserRouter>
    );
};

export default Router;

• App.js에 Router.js import 해주기

import React from "react";
import Router from "./shared/Router";

function App() {
	return <Router />;
}
export default App;

Router.js를 App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js이기 때문

🌳 react-router-dom Hooks

🪴 useNavigate

navigate를 생성하고, navigate('보내고자 하는 url')을 통해 페이지를 이동 시킬 수 있다.

const Home = () => {
	const navigate = useNvigate();
    
    return (
    	<button
        	onClick={()=>{
            	navigate("/works");
            }}
        >
       	work로 이동
        </button>
    );
};

export default Home;

🪴 useLocation

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

const Works = () => {
	const location = useLocation();
    console.log("location :>> ", location);
    return	<div></div>
}

🪴 Link

html 태그중에 a 태그의 기능을 대체하는 API.
만약 JSX에서 a태그를 사용해야 한다면, 반드시 Link를 사용해서 구현해야 한다.
(a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문)
브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화된다. → 성능에 악영향을 줄 수 있고, 불필요한 움직임.

import {Link, useLocation} from 'react-router-dom';

const Works = () => {
	return(
    	<div>
        	<Link to="/contact">contact 페이지로 이동하기</Link>
        </div>
    )
}

🌳 Dynamic Route

동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법

const Router = () => {
	return (
    	<BrowserRouter>
      		<Routes>
              	// path는 사용하고싶은 "주소"
              	// element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트
      			<Route path="/" element={<Home />} />
				<Route path="detail/:id" element={<Detail />} />
      		</Routes>
      	</BrowserRouter>
    );
};

export default Router;

:id라는 것이 바로 동적인 값을 받겠다라는 의미.
:id는 useParams 훅에서 조회할 수 있는 값

useParams: path의 있는 id값을 조회할 수 있게 해주는 훅

🌱 모던 자바스크립트 Deep Dive

매일 책 15분동안 읽고 새로 깨달은 부분 정리

9.3 명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법
-표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법

// 숫자 타입 => 문자열 타입
String(1);	// "1"

// 불리언 타입 => 문자열 타입
String(true);	// "true"

-빌트인 메서드를 사용하는 방법

// 숫자 타입 => 문자열 타입
(Infinity).toString();	//"Infinity"

// 불리언 타입 => 문자열 타입
(true).toString();	//"true"

-암묵적 타입 변환을 이용하는 방법

// 숫자 타입 => 문자열 타입
NaN+'';	//"NaN"

// 불리언 타입 => 문자열 타입
false + '';	//"false"

표준 빌트인 생성자 함수와 빌트인 메서드
자바스크립트에서 기본 제공하는 함수
표준 빌트인 생성자 함수 : 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다.
표준 빌트인 메서드 : 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드