# useLocation

26개의 포스트
post-thumbnail

URL로의 직접 접근 제한하기

사이트를 구축하다 보면 로그인 등 인증된 사용자만이 접근할 수 있는 페이지 등이 필요한 경우가 많다.이를 구현하기 위해서는 몇 가지의 방법이 있는데, 나는 그 중에서 usenavigate()를 이용하여 URL로의 직접 접근을 차단하였다.물론, fetch를 이용하여 데이

약 20시간 전
·
0개의 댓글
·
post-thumbnail

[React] 로그인,로그아웃 TroubleShooting

1차 클론 프로젝트를 진행하면서 시간이 남아 로그아웃 기능을 추가하였다. 간단한 기능이여서 금방 끝날줄 알았는데, 로그인/ 로그아웃 여부에따라서 Nav바의 아이콘이 변경되는 과정에서 문제가 생겼다. 로그인-> 로그아웃할 때는 아이콘이 잘 변경되는데, 로그아웃-> 로그

2022년 7월 31일
·
0개의 댓글
·

React root에서 레이아웃(헤더/푸터) 숨기기

root에서만 header를 숨기고 싶어서 검색했더니 이렇게 조건을 넣어주면 된다고 해서 해봤더니... 모든 페이지에서 헤더를 볼 수 없었다🙄 원인 모든 경로에 "/" 이것이 들어가기 때문. 특정 경로 예를들면 "/login"은 가능하겠지만 root는 Route애서도 exact path를 써줘야 한다. 해결 useLocation hook 사용! us...

2022년 7월 29일
·
0개의 댓글
·

[React] react-router-dom

react-router-dom은 웹에서 페이지 이동 기능을 구현하기 위한 라이브러리이다. Routing이란 네트워크간 데이터 전송의 최적 경로를 선택하는 과정이다. 여기서 최적 경로는 최단거리가 될 수도 있고, 가장 빠른 시간에 전달하는 것으로 계산될 수도 있다.Rou

2022년 6월 12일
·
0개의 댓글
·
post-thumbnail

[React] useNavigate / useParams / useLocation / useMatch

사용자가 다른 뷰로 이동 할 때 어플리케이션은 뷰를 동적으로 다시 그려줍니다.SPA는 MPA 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 더 나은 UX를 제공합니다.(= 페이지를 새로고침 하지 않습니다.)React는 라이브러리로 라우팅 시스템을 갖추

2022년 5월 30일
·
0개의 댓글
·
post-thumbnail

[ TIL ] 2022-05-11

Recoil atom 은 useState() 와 비슷하게 사용할 수 있다. 컴포넌트끼리 상태를 공유할 수 있다는 점에서, state 와 다르다. Typescript 함수 인터페이스 정의하기 Javascript trim() 문자열 양 끝의 공백(연속된 공백 포함) 제

2022년 5월 11일
·
0개의 댓글
·

useParams

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

2022년 5월 10일
·
0개의 댓글
·

useLocation, logOut

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

2022년 5월 1일
·
0개의 댓글
·
post-thumbnail

react-router v6 useLocation ts2558 오류

왜 오류가 발생하지?

2022년 4월 25일
·
3개의 댓글
·
post-thumbnail

[React] react-router-dom : useLocation

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

2022년 3월 17일
·
0개의 댓글
·
post-thumbnail

📚 react router additional Hook & Component

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

2022년 2월 18일
·
0개의 댓글
·

동적라우팅, 페이지네이션

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

2022년 2월 18일
·
0개의 댓글
·
post-thumbnail

react-router : navigate

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

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[React #14] 페이지네이션과 Query Parameter

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

2022년 2월 13일
·
0개의 댓글
·
post-thumbnail

[React #13] 동적 라우팅과 Path Parameter, 그리고 관련 Hooks

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

2022년 2월 13일
·
0개의 댓글
·
post-thumbnail

[React] GNB 현재 위치 표시

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

2022년 2월 6일
·
0개의 댓글
·

[TIL]<react>path parameter / query parameter 로 엔드포인트 작성

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

2022년 1월 15일
·
0개의 댓글
·
post-thumbnail

useNavigate() & useLocation()

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

2022년 1월 15일
·
0개의 댓글
·
post-thumbnail

[React] useLocation() 사용하여 현재 URL 정보 가져오기

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

2022년 1월 13일
·
0개의 댓글
·
post-thumbnail

[React][Router] useParams, useLocation

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

2022년 1월 6일
·
0개의 댓글
·