하얀 코딩

useQuery는 보통 React에서 데이터 fetching을 위한 라이브러리인 react-query에서 참조됩니다. react-query는 비동기 데이터의 fetching, caching, synchronization 및 updates를 처리하기 위한 도구를 제공합니다. useQuery는 가장 기본적인 hook 중 하나로, 원격 데이터를 조회할 때 사용됩니다. 아래는 useQuery의 기본 사용 방법입니다 react-query 설치하기 npm install react-query ReactQueryClientProvider 설정하기 import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClie..

리액트 라우터의 Link는 사용자가 클릭할 때 리액트 애플리케이션의 다른 경로로 라우팅하기 위해 사용되는 컴포넌트입니다. html의 태그로 렌더링이 되고 기존의 태그와는 달리 페이지 전체를 새로고침하지 않고도 내부적으로 리액트 라우터의 라우팅 메커니즘을 이용하여 컴포넌트 간의 전환을 가능하게 합니다. Link 컴포넌트의 이점 1. 성능 향상 전체 페이지 새로고침 없이 컴포넌트 간의 전환을 처리하기 때문에 빠른 사용자 경험을 제공합니다. 2. 브라우저 히스토리 관리 뒤로가기, 앞으로가기 버튼 등 브라우저 히스토리를 자동으로 관리하여 더 나은 사용자 탐색을 지원합니다. 3. 애플리케이션 상태 유지 리액트 라우터는 페이지 전환 시 애플리케이션의 상태를 유지하고 관리할 수 있습니다. 4. 동적 경로 지원 to ..

React Router 라이브러리에서 제공하는 훅(hook) 중 하나로, 현재 페이지의 정보를 가져오는 데 사용됩니다. 이를 통해 현재 경로와 쿼리 파라미터 등의 정보를 쉽게 액세스할 수 있습니다. 총 5개의 키값을 가지고 있습니다. import { useLocation } from 'react-router-dom'; const MyComponent = () => { const location = useLocation(); return ( Current Location Pathname: {location.pathname} Search: {location.search} Hash: {location.hash} Hash: {location.state} Hash: {location.key} ); }; 1. pa..

본 내용은 공식문서를 번역하여 가져왔습니다. https://reactrouter.com/en/main/routers/create-browser-router#routes createBrowserRouter v6.15.0 createBrowserRouter This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack. It also enables the v6.4 data APIs like loaders, actions, fetchers and more. Due to the decoup reactrouter.com 모든 ..

React Router v4 이후의 버전에서 웹 어플리케이션의 라우팅을 지원하는 주요 컴포넌트입니다. BrowserRouter는 HTML5의 History API를 사용하여 UI를 동기화해주며, URL을 직접 조작하면서도 페이지 전체 리로드를 하지 않는 SPA (Single Page Application)를 구현할 수 있게 합니다. 이 예제는 React Router v6 기준 사용법입니다. import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( Home About Users ); } function Home() { return Home; } function About() { return About; }..

useMatch는 React Router v6 이후 버전에서 제공하는 hook입니다. 이 hook을 사용하면 현재 위치가 주어진 경로와 일치하는지 판별할 수 있습니다. 만약 일치한다면 match 객체를 반환하고, 그렇지 않으면 null을 반환합니다. import { useMatch } from "react-router-dom"; function NavigationLink({ to, children }) { let match = useMatch(to); return ( {match ? {children} : {children}} ); } 이 예시에서 NavigationLink 컴포넌트는 주어진 to 경로와 현재 위치가 일치하는 경우 아이템을 텍스트(span)로 표시하고, 일치하지 않는 경우 링크(a)로 표..

JS의 URLSearchParams를 React Hook이라고 보면 되겠습니다. https://white120.tistory.com/85 [JavaScript - 25] URLSearchParams URLSearchParams는 웹 API의 일부로 URL의 검색 매개 변수(query parameters)를 쉽게 다룰 수 있게 도와주는 유틸리티 클래스입니다. 이것은 주로 URL의 ? 뒤에 오는 쿼리 문자열을 파싱하거나 조작할 때 유용 white120.tistory.com useSearchParams는 React Router (특히 v6 이후 버전)에서 제공하는 hook 중 하나입니다. 이 hook을 사용하면 현재 URL의 검색 매개 변수(search parameters)에 쉽게 액세스하고 조작할 수 있습니..

컴포넌트를 먼저 알아야 이해가 되는 내용입니다. https://white120.tistory.com/83 [React - 11] Outlet 컴포넌트는 React Router v6에서 도입된 기능입니다. 이 컴포넌트는 중첩 라우팅 (nested routing)에서 부모 라우트 내에서 자식 라우트 컴포넌트가 어디에 렌더링될지를 지정하는 위치를 나타냅니다. white120.tistory.com 라우터에서도 state 값이나 일반 값을 전달할 수 있습니다. 원하는 경우 context provider를 만들 수 있지만 Outlet에 기본 제공되는 context 속성을 사용할 수 있습니다. //자식, 자손에게 {loading: true}를 전부 공유한다. 자손컴포넌트에서 위의의 context prop을 가지려면 ..