React Router Dom V6 : nested routes

Reac Router Dom가 V6로 업그레이드 되면서 중첩 라우팅 기능이 강화되었다. 공식 문서에서는 nested routes라고 설명하는 중첩 라우팅은 동일한 레이아웃을 공유하는 여러 페이지에 한번의 레이아웃 호출로 간단하게 레이아웃을 공유하게 해준다. 위 홈페이지는 패스트캠퍼스에서 미니프로젝트로 진행한 해커뉴스 페이지이다. 3개의 페이지를 보면 헤더와 네비게이션을 동일하게 가져가는 것을 볼 수 있다. 만약 중첩라우팅을 사용하지 않는다면 위 3개의 라우트에 모두 각각 헤더와 네비게이션을 따로 설정해줘야 할 것이다. 예시로 들어보면 아래와 같은 구조가 나올 것이다. // simplify Router 구조를 보면 Route들이 모두 안에 들어간 모습임을 볼 수 있다. 해당라우트가 상위 라우트이고 그 안..

React Router Dom V6 변경점-Switch, Route

 리액트 라우터 돔이 V5에서 V6로 업그레이드 되면서 여러 변경점들이 생겼다. 이번에 새로 진행하는 프로젝트부터 V6를 사용하고 싶어서 큰 변경점들을 기록하려고 한다. 1. → 기존의 Switch가 Routes로 변경되었다. // V5 function App() { return ( ); } // V6 // Switch 대신 Routes를 사용하는 모습 function App() { return ( ); } 2. exact 옵션이 기본값이 되었다. // V5 // V6 // exact를 사용하지 않아도 된다. 따라서 exact를 제외하기 위해서는 주소에 *를 첨가해 주어야한다. // V5 // V6 // exact를 사용하지 않은 대신 users 뒤에 *를 붙여서 users 다음 어떤 경로가 들어와도 ..