Router (2) 썸네일형 리스트형 [React] 라우터 구현(react-router-dom) react는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서 router 라이브러리를 별도로 설치해 사용해야 한다. 터미널에 다음 명령어를 입력해 react-router-dom 라이브러리를 설치한다.npm install react-router-dom 라우터 사용법은 아래와 같다. react-router-dom에서 BrowserRouter, Routes, Route를 import한다. BrowserRouter로 App 전체를 감싸고 Routes로 url에 따라 달라지는 컴포넌트(Route)들을 감싼다. Routes로 감싸지 않은 컴포넌트는 모든 페이지에 보여지게 된다. Route는 path 속성에 경로, element 속성에 해당하는 컴포넌트를 지정한다.. [Vue3] Vue Router로 페이지 이동하기 Vue Router: Vue 공식 라우터https://v3.router.vuejs.org/kr/Vue Router 추가- Vite로 프로젝트 생성 시 Router를 추가한다.- 서버 실행 후 Router로 인한 프로젝트 변화를 확인할 수 있다.-> Home, About 링크에 따라 URL과 새로 렌더링되는 화면이 바뀐다.- 프로젝트 구조도 변화된 것을 확인할 수 있다. -> App.vue 코드가 바뀌고, router 폴더 및 views 폴더가 생성된다. 1) App.vue- RouterLink: 페이지를 다시 로드하지 않고 URL을 변경하고 URL 생성 및 관련 로직을 처리한다. HTML의 a 태그를 렌더링한다.- RouterView: URL에 해당하는 컴포넌트를 표시한다. 어디에나 배치하여 레이아웃에.. 이전 1 다음
