리액트라우터가 버전이 올라갔다.
뭐 좀 지난 일이지만.. 그래도 나의 공부를 위해 메모하기.
웹 개발에서의 라우팅은 사용자가 웹 애플리케이션에서 요청하는 URL 경로에 따라 해당하는 컨트롤러나 뷰(View) 등을 연결하여 보여주는 것이다.
리액트에서 react-router-dom을 쓴다고 하면
BrowserRouter, Switch, Route, Link 컴포넌트를 많이 사용했는데
Switch --> Routes로 바뀌었다.
보통 App.js에서 요소들을 감싸주는데
나는 index.js에 분리해서 감싸주는 방식을 배웠다.
외국 강의를 들은 것이라 분리해주는 방식이
정확히 어디에 더 나은 것인지는 모르겠다.
하지만 나는 이렇게 쓰다보니 습관이 되기도 했고
App.js에 어지럽게 모든게 들어가 있으니 불편하기도 했다.
그리고 Layout에서 고정적인 부분은 그대로 관리하고
변화하는 페이지 요소들은 react-router-dom에서 Outlet이라는 컴포넌트를 사용하여 관리해주기 때문에 전체적으로 더 깔끔하고 편하다고 느꼈다.
방법은
path에서 '/*'는 와일드카드 문자열을 사용한 것이고 모든 문자열에 대응할 수 있게 지정된 것이다.
즉 모든 경로에 대해 을 보여주고
안에서 지정된 경로에 따라 페이지를 렌더링해준다.
APP.js에서 하위 라우트를 로 감싸주고
Layout.js에서 변하지 않는 레이아웃을 구성해준다.
변화하는 페이지 요소들은 react-router-dom에서 지원하는 Outlet이라는 컴포넌트를 사용하여 전체적인 레이아웃을 보다 직관적으로 눈으로 볼 수 있다고 생각한다.
