React route(react-router-dom) 공부 [2]

현재 url에서 다른 url로 이동 할 경우 콘솔창의 네트워크 부분을 보면 bundle이 계속해서 불러와지는 것을 볼수가 있다.

글쓴이가 만든거처럼 간단한 앱이면 속도적인 측면에서 별 차이가 없게지만 규모가 큰 앱일 경우 속도가 느려지는 그러한 상황이 발생할수가 있다.

 

이러한 문제점을 해결할수 있는 방법중 하나가 react-router-dom 의 컴포넌트중 하나인 Link컴포넌트를 이용하는 방법이다.

 

navbar.jsx 파일을 연 다음에

먼저 Link를 import해주고 <a>태그들을 Link 컴포넌트로 바꾸고 ahref들을 to 속성으로 바꾸면 된다.

다른 url을 클릭을 해도 bundle을 불러오지 않고 처음에 불러온 bundle이용하는것을 볼수가 있다.