# useMatch

tk050501

개인적으로 React에서 라우팅을 할 때 요긴하게 쓸 수 있는 Hooks 2가지를 소개 해보겠습니다. useLocation useMatch 🪝 useLocation 이란? 우리는 보통 리액트에서 브라우저의 URL에 따라 Route 해주고 또 클라이언트의 URL 경로를 UI로 지정해 주기 위해 Link를 사용하여 이동 시켜줍니다. > 그런데 만약!! Link를 사용하여 페이지를 전환할 때 특정 데이터도 함께 넘기고 싶은 상황이고 URL 처럼 클라이언트에게 보이면 안 되는 은밀한 데이터라면 어떻게 하실 건가요? > 이때 가장 sexy하게 사용할 수 있는 요긴한 녀석이 useLocation 입니다! useLocation은 Link에서 설정한 to 경로

tk050501

리액트에서 API를 호출하여 화면에 뿌리는 것을 만드려면 간단하게 해도 state는 최소 2개가 사용되고 (data 저장용, loading 체크용 state) + fetch 함수 작성까지 > 코드가 꽤 길어지고 가독성이 떨어지게 된다. 그리고 만약 페이지 첫 방문시에 한번만 API를 호출하면 되는 상황이라고 치면 위와 같이 수동적으로 state를 만들어서 구현하게 되면 다른 페이지에 갔다가 다시 왔을 때 또 한번 더 API를 호출하게 되는 로직이 되는데 이는 상당히 비효율적 입니다. > 위와 같이 긴 코드 + API 데이터 재사용 안됨 (물론 어떻게든 하면 될 수도) 이 2가지를 훨씬 더 짧고 섹시하게 해결하기 위해 나온 리액트 Hook이 바로 useQuery() 이고 React Query 입니다! 🦴 리액트 쿼리를 본격적으로 사용하기 전에 기본 셋팅하자! npm 설치 루트 컴포넌트에서 감싸주기 🤓 Worst 상황을 만

rik963

react-router-dom은 웹에서 페이지 이동 기능을 구현하기 위한 라이브러리이다. > Routing이란 네트워크간 데이터 전송의 최적 경로를 선택하는 과정이다. 여기서 최적 경로는 최단거리가 될 수도 있고, 가장 빠른 시간에 전달하는 것으로 계산될 수도 있다. > Router란 각기 독립된 네트워크들을 연결시켜주는 장치이다. 간단하게 생각해서 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이 라우팅이다. react-router-dom은 SPA(single page application)에서 선택된 url에 해당하는 데이터를 하나의 페이지에서 렌더링해서 보여주는 라이브러리이다. 설치  npm  yarn React Router는 사용자가 입력한 주소를 감지하는 역할을 하며, 다양한 환경에서 동작할 수 있도록 여러가지 라우터 컴포넌트가 제공된다. 그 중 가장 많이 사용되는 라우터는 BrowserRouter와 HashRouter

mopevxw

참고 : https://velog.io/@soryeongk/ReactRouterDomV6 >Nested Route 설정 = 자식 Route들을 부모 element의 Outlet으로 위치 지정 http://localhost:3000/btc-bitcoin/price http://localhost:3000/btc-bitcoin/chart * Coin.tsx* >UseMatch = URL path 이름에 대해 패턴 일치 시키고 일치 여부 반환 http://localhost:3000/btc-bitcoin/price => console.log(priceMatch)결과 1.Price 탭 클릭시 url=> http://localhost:3000/btc-bitcoin/price 2.use