민프

https://react-query-v3.tanstack.com/devtools Devtools | TanStack Query Docs Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will like tanstack.com React Query에서 ReactQueryDevTools이라는 hook은 나의 캐시에 있는 que..

공식문서 https://react-query-v3.tanstack.com/quick-start Quick Start | TanStack Query Docs This code snippet very briefly illustrates the 3 core concepts of React Query: Queries tanstack.com 설치 npm i react-query 적용 전 function Coins(){ const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(()=>{ (async()=>{ const response = await fetch("https://api.coinpaprika..

useMatch란? 특정한 URL에 있는지의 여부를 알려준다. https://reactrouter.com/en/main/hooks/use-match useMatch v6.8.0 useMatch Type declarationdeclare function useMatch( pattern: PathPattern | Path ): PathMatch | null; Returns match data about a route at the given path relative to the current location. See matchPath reactrouter.com 사용법은 아래와 같다 https://reach.t..

중첩 라우팅이란 중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 쉽게 말해서 route안에 있는 또 다른 route이다. https://ui.dev/react-router-nested-routes/ The Guide to Nested Routes with React Router In this comprehensive, up-to-date guide, you'll learn everything you need to know about creating nested routes with React Router. ui.dev 공식문서에서 설명해주는 것을 보면 v6에서 nested routes를 구현하는 방법은..

화면 간 데이터 이동 방법은 앞서 포스팅 한 useParams으로 파라미터 값을 얻어서 할 수도 있고, props로 데이터를 보낼수도 있는데 이번에는 Link를 이용한 데이터 이동을 해보려고 한다. https://reactrouter.com/en/main/components/link#state Link v6.8.0 This is the web version of . For the React Native version, go here. Type declarationdeclare function Link(props: LinkProps): React.ReactElement; interface LinkProps extends Omit { re..

리액트 개발자라면 상태 관리를 어떻게 해야 좋을지 생각해보게 된다. 상태관리 라이브러리로는 Redux, MobX, Recoil 등등.. 이 있는데 이 라이브러리들은 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화되지 않기 때문에 프론트엔드 개발자들은 직접 상태를 업데이트해 줘야 하는 불편함이 있다. 즉 서버 상태에 따른 클라이언트 상태 관리가 잘 되지 않았다는 것 인데 이러한 불편함을 해소해주기 위해 React-Query, SWR, Redux-saga, Redux-Thunk 가 있는데 Redux를 알아보던 중 이러한 글을 보았다. https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/ React에서 서버 데이터를 최신으로 관리하기(..

theme 변화에 따른 스타일을 한번에 바꾸고 싶으면 styled-components의 createGlobalStyle을 사용하면 된다. https://github.com/zacanger/styled-reset/blob/master/src/index.ts GitHub - zacanger/styled-reset: Eric Meyer's Reset CSS for styled-components Eric Meyer's Reset CSS for styled-components. Contribute to zacanger/styled-reset development by creating an account on GitHub. github.com 여기에 나온대로 모든 css defalut value를 초기화 시켜주고..

보호되어 있는 글입니다.

우리가 검색을 하거나, filter 하거나, pagnation 하고 싶을 때 이런 정보들을 URL에 넣게 되는데 이런 것들을 search Parameter 이라고 한다. https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams URLSearchParams - Web APIs | MDN The URLSearchParams interface defines utility methods to work with the query string of a URL. developer.mozilla.org searchParams에 대한 메소드들은 아래 사진과 같이 공식홈페이지에 나와있다. 만약 URL이 아래와 같다고 해보자 localhost:3000/?fav=ye..

Outlet 루트 element에 대한 자식 element들이 있을텐데 사진과 같이 그 자식들의 element에서 또 자식 element를 만들어서 자식 path에 따른 element를 띄워주려면 어떻게 해야할까? 위 오른쪽 사진과 같이 Outlet을 써주게 되면 해당 링크에 따른 Followers element를 띄워줄 수 있다. Outlet를 이용하여 부모 - 자식 각 Path에 따른 element를 띄워줄 수 있다. 그럼 여기서 User화면에서 Followers 화면과 공유하고 싶은 데이터가 있다면 어떻게 해야할까? useOutletContext 부모 element에 useParmas를 사용하고 있다면 그에 따른 자식 element에서도 useParmas의 데이터를 사용하여 데이터를 받을 수도 있다..