# useLocation

jinyinshu

follow, unFollow에 들어가기 이전에 useParams, keyField에 대해서알아보고 넘어가자\->avatar나 username등을 클릭했을때, user의 Profile page로 넘어가게 하는것\->주소는 localhost:3000/users/(\*ex

jinyinshu

useNavigate로 page가 이동할떄, 이동하면서 보내진 value나 state들을받아서 사용할 수 있음.console.log(location)을 찍어보면 넘어오는 data들을 확인 할 수 있음.logout fn을 만들어서 onClick={logout}적용시켜주면

code-bebop

왜 오류가 발생하지?

kml9003

멋쟁이사자처럼 프론트엔트 스쿨 과정을 마치고, 스터디 그룹원들과 함께팀 프로젝트를 하면서 겪었던 문제와 그 해결 방안을 다음과 같이 정리해 보고자 한다.이번 글에서 남기고자 하는 기록은 접속한 URL 주소에 따라 다른 스타일 Header 만들기이다.만들어야 하는 Hea

kcj_dev96

이전 포스팅에서 react router에서 주로 사용되는 컴포넌트 및 기술들을 알아보았다.주로 사용하는 것뿐만 아니라 react router로 여러 가지 기능을 구현할 때 필요한 훅이나 컴포넌트들이 있다.본 포스팅에서는 부가적인 훅과 컴포넌트에 대해 알아보겠다.

ksung1889

더보기 버튼을 누르면 0~10 보던게0~20 이렇게 되는건가?

yhko1992

LaunchShoe 컴포넌트를 다시 살펴보자.useParams를 이용해서 shoes db안에 해당 shoes가 없으면 \* 가 목적지인 link를 리턴하게 했다.그러나 다른 방법으로 길을 설정할 수 있다. 바로 useNavigate를 이용하는 것이다.shoes가 없을떄

kykim_dev

Pagination 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다. (ex: 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능) 프론트엔드에서

kykim_dev

라우팅을 위한 기본 코드 구조 index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역 index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할 Router.j

ryeon5789

현재 사용자가 어느 페이지에 있는지 표시하기 위해 페이지 이동 할 때마다 GNB color 변경페이지 이동은 Link로, color 변경은 onClick 으로 단순하게 생각했었다.페이지에 머무르는 동안에는 GNB color를 유지해야 하고, 페이지 이동 할 때마다 co

goomg93

프로젝트를 진행하며 여러 페이지를 연결 시켜야되고 연결된 페이지간에 공유되어야 할 정보를 전달하는 방법이 필요함을 느꼈다.나의 예로는 리스트 페이지에서 어떤 아이템을 클릭했을때 해당 아이템의 제품id 값과 컬러id 값을 전달 받고 싶었다.그 id 값들을 통해서 백엔드로

ryeon5789

제품 상세 페이지에서 "결제하기" 를 눌렀을 때, 결제페이지로 이동하면서 데이터를 전달해야 한다.다음주 월요일까지 프론트에서 주문정보를 보내서 서버에 저장되고 난 다음에 결제하는 외부 API 호출한 후, 결제를 하고.. 또 결제정보를 서버로 보낼 수 있도록 해야한다..

nemo

useLocation을 사용하기 위해서는 라우터 설치가 필수다. 자세한 세팅 방법은 router 세팅하기 페이지에서 참고하면 된다.npm install react-router-dom1) useLocation을 import 한다.2) 변수에 useLocation 정보를

gygy

프로젝트를 하던 도중 상품목록 페이지를 만들던 팀원이 질문을 했다.'그런데, 이 컴포넌트 하나로 어떻게 각각의 상세페이지를 보여주고 이동할 수 있어요?'처음에 생각했던 방법은 이것이었다.각 카테고리별로 라우터를 설정한 다음 해당하는 컴포넌트에 각각의 데이터를 prop로

gyrbs22

query string 관련 - URL에서 변수 확보하기 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4 window.location.path

stella6767

특정 페이지에서 나올 때 자동으로 새로고침을 해야 하는 경우가 생겼다. 일단 URL이 달라질 때마다 이벤트가 호출되는 방법을 찾았다. URL 값을 가져오기 위해 리액트 라우터의 useLocation이라는 훅을 사용할 수 있는데 BrowserRouter가 있는 컴포넌트에

devstone

react-router-dom? react-router? 차이가 뭔가요?

zxc886

react-router-dom 5.1v 부터 3가지의 hooks을 제공합니다.설치는 이전과 동일합니다.터미널에 react-router-dom 설치 1\. yarn add react-router-dom2\. npm install react-router-domuseHist

roghabo

useHistory, useLocation, useParams

yiyb0603

안녕하세요! 오늘은 제가 프로젝트들을 진행 해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다.