맨 땅에 프론트엔드 개발자 되기

React Router는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. v6로 업그레이드 되면서 React Hooks 를 기반으로 한 React Router Hooks 들이 추가되었다. 쿼리스트링 파서(parser)를 따로 설치하지 않아도 될 정도로 편리한 기능들이 있어서 정리해보려고 한다. 기본 설치 $ npx creat-react-app react-router-practice $ npm i react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserR..

useParams 란? react-router에서 제공하는 Hooks 중 하나로 React 16.8 버전 이상에서만 구동이 가능하다. Parameter(파라미터) 값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와준다. 예를 들어, 여러 개의 영화 정보가 담겨있는 데이터를 출력해준다고 가정할 때, 영화 제목을 클릭해서 세부 페이지로 이동을 하도록 구현한다면, 영화의 id 값을 URL로 넘겨 세부 페이지에 id 값에 해당하는 영화 정보만 출력하도록 만들 수 있도록 도와준다. useParams 문법 useParams를 사용하기 위해서는 먼저, react-router-dom을 설치해야한다. npm install react-router-dom 먼저, 라우팅을 구현할 페이지들을 생성한 뒤에 디..