[TIL] 20240603 - bookstore(4)

useParams

---

리액트에서 라우터를 사용할 때 파라미터 정보를 가져와 활용하는 Hooks

🧊 Install

npm install react-router-dom

🧊 Use

URL : localhost:3000/books/:bookId

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

function BookDetail() {
  const { bookId } = useParams();
  
  return (
    <div>
      <p>book id : { bookId }</p>
    </div>
  );
};

export default BookDetail;

Day.js

---

날짜와 시간을 편리하게 관리할 수 있는 라이브러리

🧊 Install

npm install dayjs

🧊 format 지정

import dayms from "dayjs";

var date = dayjs("2024-06-03 22:40:20", "YYYY-MM-DD HH:mm:ss");

date.format(); // 2024-06-03T22:40:20+09:00
date.format("YYYY년 MM월 DD일"); // 2024년 06월 03일
date.format("DD/MM/YY"); // 06/03/2024
date.format("YYYY.MM.DD HH:mm:ss"); 2024.06.03 22:40:20

🧊 원하는 단위 값 구하기

import dayms from "dayjs";

var date = dayjs();
now.format(); // 2024-06-03T22:40:20+09:00

now.get("year");        // 년 : 2024
now.get("month");       // 월 : 5(0 ~ 11)
now.get("date");        // 일 : 3
now.get("day");         // 요일 : 1
now.get("hour");        // 시 : 22
now.get("minute");      // 분 : 20
now.get("second");      // 초 : 20
now.get("millisecond"); // 밀리초 :40

🧊 날짜 / 시간 차이 구하기

import dayms from "dayjs";

var date1 = dayjs("2024-06-03 22:40:20", "YYYY-MM-DD HH:mm:ss");
var date2 = dayjs("2023-04-02 18:24:08", "YYYY-MM-DD HH:mm:ss");

date1.format("YYYY-MM-DD HH:mm:ss");
date2.format("YYYY-MM-DD HH:mm:ss");

date1.diff(date2, "year"); // 1
date1.diff(date2, "month"); // 2

keyof

---

keyof는 객체 형태의 타입을 유니온 타입으로 만들어주는 연산자

type Book {
  id: number;
  title: string;
  author: string;
  price: number;
};

type BookKey = keyof Book; // "id" | "title" | "author" | "price"