react-router-dom

[ TIL ] Next.js에서 Link 사용하기

✍ React와 Next.js에서 란? React에서 react-router-dom을 이용할 때도 Link 태그를 사용했었다. : react-router-dom About 익숙한 모습이다. : Next.js Home {post.title} Blog Post . . . 다른 점이 몇 개 있다. 그 중 하나가 바로 a 태그이다. react에서는 페이지를 전환하는 과정에서 페이지를 불러오지 않고 페이지의 주소만 변경해야 하기 때문에 a 태그를 쓰지 않는다. 반면에 Next.js는 페이지 전환을 방지하는 Link 내에서 a 태그를 사용한다. Home Next.js Link 태그 안에 a 태그를 따로 쓰지 않더라도 HTML 마크업은 a 태그 안에 Home이 쌓여져 나온다 => a 태그를 Link 안에 넣지 않아도..

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing )

✍ Next.js에서의 라우팅 Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원한다. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Next.js는 파일 시스템 기반의 라우팅을 해준다 pages 경로에 파일을 추가하면 자동적으로 route할 수 있다 => Next.js 프로젝트..

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

내가 공부하다가 궁금해서 정리해본 차이점 react는 알다시피 SPA(single page application)에 최적화 되어있다. 그 이유 중 하나가 바로 router. 1. react-router-dom을 설치해서 이용하며 2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다 router에는 우리가 익히 아는 BrowserRouter HashRouter 외에도 StaticRouter MemoryRouter NativeRouter 이 있다. 🤷‍♀️ BrowserRouter과 HashRouter의 차이는? BrowserRouter www.123123/post 1. HTML5의 history API를 이용해 UI를 업데이트 2. 동적인 페이지에 적합 3. 새로 고침 / 경로를 ..