[React] React-router는 내부적으로 history api를 사용하는지 확인하기

history api와 hashbang이 등장하면서 html의 트렌드가 spa로 넘어가게 되었다고 생각합니다.

React를 하면서 react-router는 떨어질수 없는 관계라 생각하는데요, react-router는 어떻게 만들어 졌을까요?

react-router는 react-router-dom과 react-router-native두 가지 폴더가 존재하는데요 이에 따라 다양한 라우터들이 정의되어있습니다. 때문에 웹에서 사용하는것이라면 HashRouter 또는 BrowserRouter를 최상단에 정의해주어야 합니다.

 

🌱HashRouter

다음과 같이 되어있습니다. hashbang의 fragment와 같이 서버에 전송되지 않기 때문에 사용하지 않는것을 권장한다고 되어있습니다.

 

 

 

🌱BrowserRouter

다음과 같이 정의가 되어있는것을 볼 수 있습니다.

 

 

 

🌱Routes

우리는 BrowserRouter와 함께 Routes와 Route로 경로를 지정해주는데요, Routes의 구현체를 본다면 다음과 같이 되어있습니다.

 

useReoutes와 createRoutesFromChildren함수를 볼 수 있는데요, 한번 차근차근 확인해 보겠습니다.

 

 

createRoutesFromChildren 확인하기

 

코드를 보게 된다면 우선 children들이 엘리먼트가 맞는지 유효성검사를 합니다.

그 다음 Fragment가 있다면, fragment의 자식들을 다시 createRoutesFromChildren에 넣어주는것을 확인할 수 있습니다.

다음으로  엘리먼트에 children이 있다면 그 children을 다시 createRoutesFromChildren에 넣어주는것을 확인할 수 있습니다.

마지막 그 결과를 routes라는 하나의 배열로 반환하는것을 볼 수 있습니다.

따라서 createRoutesFromChildren은 중첩된 children이나 fragment로 감싸져 있는 children을 분해하면서 재귀적으로 routes배열에 담아 반환하는것을 볼 수 있습니다.

 

useRoutes 확인하기

 useRoutes의 경우는 React의 jsx가 createElement를 호출하는 편한 방법과 같이 <Routes> 또한 useRoutes를 호출할 수 있는 방법입니다.

useRoutes의 경우 아래와 같이 matches가 있다면 match라는 이름의 객체를 만들어 renderMatches의 인자로 넣어줍니다.

그렇다면 진짜 마지막 renderMatches에 대해 확인해 보겠습니다! renderMatches의 경우 아래와 같이 Provider를 설정해주는것을 확인할 수 있었습니다.

 

 

 

마치며

사실 react-router가 내부적으로 history api를 사용하는지 확인하기 위해 살펴보았으나 어떻게 만들어졌는지까지 확인하게 되었습니다. 

useContext또한 사용하여 만들었다는 사실을 처음 알게 되었습니다.