react-router
-
React - Dynamic RoutingReact/Router 2021. 6. 5. 18:51
동적 라우팅 설정 1 Route path에 /:{key} key 값 가져오기 해당 컴포넌트에서 props.match.params.[key] // App.js function App() { return ( ); } // Profile.jsx export default function Profile(props) { const id = props.match.params.id; console.log(id, typeof id); return ( Profile 페이지입니다. {id && id는 {id}입니다.} ); } 동적 라우팅 설정 2 query string npm i query-string /about?name=msko 호출 시, 아래와 같이 처리 // About.jsx import queryString f..
-
React - Router RoutingReact/Router 2021. 6. 5. 17:11
https://reactrouter.com/ React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com SPA 라우팅 과정 브라우저에서 최초에 '/' 경로 요청 서버에서 React Web App 전체를 내려줌 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌 React App 에서 다른 페이지로 이동하는 동작을 수행하면, 새로운 경로에 맞는 컴포넌트를 보여줌 React Router 설치 npm i react-router-dom CRA에 기본 내장된 패키지가 아니므로 별도로 설치 필요 react-router-dom은 Facebook의 공식 패키지가 아님 가장 대표적인 라우팅 패키지 React ..