라우터 (2) 썸네일형 리스트형 [TIL] react-router의 Link와 a 태그 react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성한다. 하지만 우리는 이미 페이지 이동 기능을 갖고 있는 태그인 a 태그를 알고 있다. 두 기능 사이에는 어떤 차이가 있을까? 결론부터 말하면, 페이지 새로고침 여부가 이 2가지의 차이점이다. Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않는다. 반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다. 페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아가기 때문이다.[1] Link 태그를 사용.. [TIL] react-router-dom으로 페이지 이동하기 React에서 원하는 url에 원하는 페이지를 띄우기 위해서는 react-router(또는 react-router-dom)를 사용해주어야 한다. 이 모듈은 경로를 지정하고, 해당 경로에 방문했을 때 원하는 컴포넌트 요소를 띄울 수 있게 해 준다. react-router vs react-router-dom 정확히 말하자면 react-router가 모체라고 할 수 있다. 모든 react-router 기능을 포함하고 있는 모듈이다. react-router-dom은 react-router의 여러 기능 중 웹 어플리케이션에서 사용하기 위한 기능(DOM과 관련된)을 포함하고 있는 패기지로, react-router의 자식이라고 볼 수 있다. React가 웹뿐만 아니라 React Native에서도 쓰이기 때문에 웹에서.. 이전 1 다음
