Frontend/- React router7 React-router-dom : loader 함수를 통한 URL 가져오기 loader 함수는 페이지가 렌더링되기 전에 데이터를 미리 로드하는 함수로, params와 request를 통해서 URL 파라미터 및 쿼리 문자열을 사용할 수 있다. loader 함수의 params의 경우에 리액트 라우터의 useParams과 같은 정보를 제공하지만, 웹 페이지가 렌더링이 되기 전에 데이터를 가지고 있다는 차이점이 있다. URL 가져오기 예시1. 다중 가변 인자 URL 경로 사용 예시 예시 : /category1/item1(1) App.jsx 에서 라우트 정의 및 load 함수 정의import { createBrowserRouter, RouterProvider } from "react-router-dom"import Root from "./pages/Root"import Home fro.. 2024. 10. 18. React-router-dom : loader에 대해서 React-router-dom의 loader는 페이지가 렌더링 되기 전에 데이터를 불러오고, 해당 데이터를 컴포넌트에서 사용할 수 있도록 하는 기능으로, 와 함께 사용할 수 있다. useLoaderData현재 컴포넌트와 연결된 로더 함수에서 반환된 데이터를 가져온다.1) 로더함수 연결 createBrowserRouter([ {path: '경로', element: , loader: 로더함수} ])2) 반환된 데이터 가져오기 const 변수명 = useLoaderData();useRouterLoaderData 현재 렌더링된 모든 라우트의 로더 데이터를 사용할 수 있다. 이 훅은 컴포넌트가 중첩이 되어있을 경우 유용하게 사용된다. 사용시에 반드시 id값이 있어야 한다.1) 로더함수 연결 crea.. 2024. 9. 29. React-router-dom: createBrowserRouter에 대해서 createReactRouter는 리액트 라우터 v6.4이후에 도입된 기능으로, 라우터 객체를 생성하는데 사용하는 메서드이다. 브라우저 기반 라우팅을 더 간편하게 설정할 수 있도록 돕는다. 이를 통해 라우터와 관련된 설정을 더 구조화되고 직관적으로 관리할 수 있다. 기존의 경우 (1) 로 컴포넌트를 감싸고 이후에 (2) path와 element를 설정했다. } /> } /> createBrowserRouter를 사용하면 아래처럼 간편하게 정의할 수 있다. const router = createBrowserRouter([ { path : '/home', element: }, { path : '/about', element: }, ]); createBro.. 2024. 9. 26. React-router-dom: 리액트 라우터 훅에 대해 알아보자 Home v6.26.2 | React Router Home v6.26.2 | React Router reactrouter.comReact-router-dom에 여러가지 훅이 있다. 더 많은 훅들은 위의 홈페이지에 들어가서 확인할 수 있다. 이번 게시물에서는 useParams, useSearchParams, useNavigate 훅에 대한 내용을 다룰 예정이다. useParamsuseParams는 URL의 동적 파라미터 값을 가져오는 훅으로, URL에 정의된 파라미터를 키-값의 형태의 객체를 반환하여 동적 라우팅을 구현한다. 1. 동적 파라미터를 사용할 컴포넌트의 Route에 가변인자값명을 설정한다 ( :가변인자값명 )URL의 특정 부분을 변수처럼 사용하여 해당 값을 컴포넌트에서 접근할 수 있다.impo.. 2024. 9. 25. React-router-dom: Outlet에 대하여 을 사용하게 되면 컴포넌트가 중첩(nested router)되었을 경우, 상위 컴포넌트는 유지되면서 하위 컴포넌트만 렌더링할 수 있다. UI의 일관성은 유지하면서 특정 부분만 업데이트 할 수 있다. Outlet 사용하기1. 유지되어야 하는 상위 컴포넌트에 Outlet을 사용한다. 해당 예제에서는 유지되어야 하는 부분은 타이틀과 페이지 이동 버튼이다. import { NavLink, Outlet } from "react-router-dom"import styles from "./css/Page.module.css"export default function Page() { const activeStyle = { color: "purple", } return ( .. 2024. 9. 25. React-router-dom: <Link>와 <NavLink>에 대해서 Link웹 페이지에서 이동 기능을 가진 태그의 경우, 클릭하게 되면 브라우저가 새로고침되어 기존의 상태 값이 초기화된다. React Router에서는 태그 대신 컴포넌트를 사용하여 태그와 유사한 동작을 하면서도 페이지를 새로고침 하지 않고 URL경로만 변경할 수 있도록 한다.링크import Home from './components/Home'import About from './components/About'import { Route, Routes, Link } from 'react-router-dom'import Intro from './components/Intro'import './App.css'function App() { return ( 페이지 이동 버튼 Intro .. 2024. 9. 25. 이전 1 2 다음