React Router Dom

npm i react-router-dom

• 터미널에서 설치한 후 사용한다

Routes

• <BrowserRouter> 여러 개의 BrowserRouter를 가질 수 있다. 비슷한 페이지끼리 묶을 수 있다.
• <Routes> 여러 개의 Routes를 가질 수 있다.
  • 디렉터리의 개념으로 볼 수 있음

동적 라우팅

<Route path="/user/:id" element={<User />} />

• 경로 끝에 :id 가 붙는 것이 동적 라우팅이라고 한다.
  반대로, 어떤 경우에도 고정되어 있는 경로는 정적 라우팅이라고 한다.
• 뒤에 어떤 id가 들어올지, 경로가 동적으로 달라질 수 있기 때문!
• 유저 프로필 등에 사용된다. 예를 들어 유저프로필이 30개 있다면, 뒤에 유저프로필 id를 계속 변경해 주면 된다.

hook - useParams

• 유저가 입력한 값을 가져와서 리액트 안에서 활용할 수 있다

---

• mx-auto margin auto. 가운데 정렬하고 싶을 때 사용함.
• mt-12 margin top 12. 위에 12만큼 높이값을 준다.
• mb-12 margin top 12. 아래 12만큼 값을 준다.
• my-12 margin 위 아래로 12만큼 준다.
• h-[136px] flex justify-center items-center my-12 동일하게 구현함.
• rounded-md 모서리 둥글게!
• p-2 패딩 2 주기
• hover: 마우스를 호버할 때의 스타일
• active: 클릭했을 때의 스타일
• rem 픽셀 단위
  https://yozm.wishket.com/magazine/detail/1410/

--

로컬스토리지에 저장하기
-> json 파일을 만들어서, stringify 해야함