일단 Doit

Router 이동시 마다 모바일과 같이 Transition 효과를 적용할수 있습니다. TransitionGroup, CSSTransition 활용하여 2개 Layout이 움직이는 것처럼 효과를 주는 것이 가능합니다. 적용 순서 TransitionGroup 정의 CSSTransition 정의 CSS 정의 : Route 및 Transition Class router back 감지 1. TransitionGroup className : TransitionGroup CSS class명을 지정 ... 2. CSSTransition key : 해당 Key로 해당 Route를 찾아서 Transition 효과를 적용함 useLocation을 이용하여 현재 path를 key 로 설정 className : 실제 Trans..

React/Router 2023. 1. 20. 17:08

재귀함수를 사용하여 배열로 부터 Route를 생성하자. 는 로 정의하며 부모와 자식간의 관계로 나타냅니다. 하지만, Array등으로 정의해서 관리하지않으면 복잡하고 보기 어려운 코드로 변질됩니다. 나쁜예) App.jsx {/*자식 Route 정의 */} ..... 그래서, Data API를 사용하는 Router는 Array로 Route 정의를 관리합니다. 좋은예) routes.js const routes = [ { path: '/', element: , }, { path: '/first', element: , }, { path: '/second', element: , }, { path: '/styled', element: , }, ]; 따라서 아래와 같은 방법으로 를 동적으로 생성하는 방법으로 위와 같이..

React/Router 2023. 1. 20. 17:05

사용방법은 단순합니다. 1. 정의 2. 정의 3. 정의 - Route 및의 자식 Route 정의 4. 지정 - 부모Route와 자식Route간의 연결 App.js import { Routes, Route, BrowserRouter } from 'react-router-dom'; import HomePage from '@/pages/HomePage'; import FirstPage from '@/pages/FirstPage'; import SecondPage from '@/pages/SecondPage'; import ChildPage from '@/pages/ChildPage'; function App() { return ( {/*자식 Route 정의 */} ); } export default App; ..

React/Router 2023. 1. 20. 17:00

Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 element 각 컴포넌트 정의 App.js - router 생성 - createBrowserRouter를 통한 Router 생성 - RouterPrivder 정의 import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import routes from '@/routes/routes'; const router = createBrowserRouter(routes); function App() { return ; } export default App; routes.js - path 및..

React/Router 2023. 1. 20. 16:59

React Router 설정하는 방법은 크게 2가지 입니다. Data API를 사용하는 지원하는 Router (v6.4) Data API를 지원하지 않는 Router Components 공식문서에서는 Data API를 사용하는 지원하는 새 Router를 사용하는 것을 권장합니다. 사용법은 어렵지 않으나, 아직 Transition 효과를 적용하는 예제가 많지 않습니다. 따라서, 2가지 방법에 대해 알아보고자 합니다. https://innovatorwhy.tistory.com/10 React Router - Data API를 사용하는 Router Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 eleme..

React/Router 2023. 1. 20. 16:57