-
React Router에 대해서 내가 모르던 것들React.js 2020. 11. 4. 13:27
1. react-router-dom vs react-router
react-router는 SPA(Single Page Application)에서
페이지 이동(새롭게 페이지 GET을 해오고, 다시 그리고, 그 사이에 사용자는 깜빡인다고 느껴지는 과정들) 없이
화면간 이동을 할 수 있게 만들어주는 library입니다.react-router는 이러한 기술의 core입니다.
react-router를 import해서 쓰고 있는것이 react-router-dom인데,
react-router-dom은 이제 웹(프론트엔드)을 개발하면서 필요한 dom 요소들을 렌더링하는 component를 추가로 가지고 있습니다.<Link>
는 브라우저 렌더링할때<a>
tag를 그리고,<BrowserRouter>
는 뒤로가기 앞으로가기 등의 이동 이력을 관리하는window.history
를 조작(interact)합니다.따라서 둘 중에 어떤것을 import 해야하냐 하면,
지금은 react-router-dom만 import하면 됩니다.
react-router도 포함되어있기 때문입니다.2. Router를 쓸 때 페이지간 이동시
<a>
tag를 같이 써도 되나요?<Route>
를 통해 정의한 링크는 실제로 존재하는 링크가 아닙니다 (?)<BrowserRouter>
를 통해 페이지 이동의 이력 관리를 하고 있다면, 중간에<a>
tag 통해 페이지 이동시 페이지가 갖고있던 status, 이동 history 등을 모두 잃게 됩니다.
'React.js' 카테고리의 다른 글
[React 튜터링 일지] React 기본 2주차 (0) 2020.12.03 [React 튜터링 일지] React 기본 1주차 (0) 2020.11.27 [초심자 튜터링] React의 render() 리턴에 대하여 (0) 2020.11.26 React project structure articles (0) 2020.11.17 virtual DOM에 대해서 (0) 2020.10.20