# useLocation
[React] 컴포넌트 간 데이터 공유 방법
📌 하나의 페이지에서 다른 페이지로 넘어갈때, 어떠한 방식들을 사용하여 넘기는지 알아보자.React를 공부하는 사람들이면 페이지간 이동을 Router를 사용하여 구현을 해보았을 것 이다.만약 현재 페이지에서 쓰이는 데이터가 다음 페이지에 사용된다면, 어떻게 그 데이터
[ useLocation ] 현재 위치는 어디인가?
React를 사용하다가 위치에 관련된 사항들을 추가하고 싶다면, useLocation 이라는 ReactHook을 사용하면 된다.location.pathname 으로 현재경로의 정보를 가져올 수 있고위코드는 isLogin 상태가 false 일경우 /profile 경로에
Route에 입장권한을 부여해보자.
삼항연산자로는 수많은 Route를 엮기에는 너무나 복잡하였다. 같이 프로젝트를 하던 동료중에 useLocation을 이용한 방법이 있다고해서 GPT에게 물어본뒤 다음단계로 진행하였다.로그인 판별 여부를 판단해주는 상태관리 useEffect,현재 App의 location
[React] 컴포넌트 사이에서 데이터 주고받기 (useNavigate & useLocation)
컴포넌트간에 useNavigate 훅을 사용하면서 데이터를 함께 넘겨주고 싶을 때가 있다.이럴 때에는 useNavigate와 useLocation을 적절히 활용해주면 된다.위의 UserCard 컴포넌트에서는 user state에 유저 정보를 담고 있다.해당 컴포넌트를
react 리렌더링 줄이기 (react Memo)
cat bot에서 새로운 기능인 고양이가 있는지 없는지 ? 에 대해 선택을 받도록 기능 구현을 하였다.
조금조금 REACT, Router
SPA 싱글페이지 어플리케이션인 리액트에 다중페이지 효과를 주는 Router와 Router와 관련된 HOOK에 대해서 알아보자.
useNavigate()로 데이터 전달하기
useNavigate를 경로 이동 시에만 사용했던 과거의 나..🥲물론 잘못된 것은 아니지만 useNavigate를 데이터를 전달하는 목적으로도 사용하여 조금 더 효율적으로 코드를 작성할 수 있다는 사실을 배웠다.useNavigate()를 기존에 사용했던 방식(예시)u
React - useNavigate, useLocation state null 오류 해결
2023.02.14(화) 1차 프로젝트 진행 중navigate 함수를 호출해서 두개의 파라미터(이동경로, 전달할 데이터)를 넣어 전달한다.버튼의 onClick 이벤트 발생 시 데이터를 전달하는 convey() 기능이 발동된다.location 함수를 호출해서 naviga
[React] 쿼리 스트링(Query String)
URL의 한 부분으로서, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용 (구체적으로 더 정렬되고 특정된 형태의 정보를 요청) 형태 쿼리스트링: key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음) ? : 쿼리스트링의
React | useLocation
useLocation 을 통해 url 데이터를 받아 활용할 수 있다.사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hook.객체 형식으로 보여주기 때문에 location.key 형태로 접근할 수 있다!navigate 로 데이터를 보내고 (두번째 인자로 stat
[react] 맨날 하는 react-router-dom @v6 초기 세팅
맨날해도 맨날 헷갈리는 react-router-dom 초기 셋팅! @v6으로 제대로 해보자!
[React] useLocation / useParams
일반 자바스크립트에서 url 정보를 가져오고 싶은 경우 location 인터페이스를 사용합니다.(참조) Location - Web API | MDNreact-router-dom 에서 제공하는 여러가지 Hook들은 이러한 작업을 편하게 할 수 있도록 도와줍니다. 우리가
React-Router-Dom v6 (hook 사용)
유튜브 클론코딩에서 사용한 useLocation, useNavigate, useParams에 대한 내용.
useLocation의 활용하여 현재 위치의 컴포넌트에서 id 얻어내기 / id 중복 에러
이번 프로젝트인 '프로젝트 관리형 어플리케이션'을 만들면서 한 가지 어려운 점이 있었다.이러한 형태의 칸반보드는 보통 Todo를 클릭하면 해당 Todo와 관련된 상세페이지로 넘어간다.처음에는 상세페이지의 코멘트를 모두 불러오게 하였다.이때, 해당 Todo외에 다른 To
리액트 useLocation(), pathname 한글 깨짐
한글이 포함됀 현재 url값 얻기 = decodeURI(window.location.pathname)회사에서 소셜로그인을 할때 callbackUrl을 localStorage에 담아두고 리다이렉트 할때 가져와서 리 렌더링을 하는 과정에서 벌어진 문제가 있었습니다..use
[Today I Learned] 12월 2주차 day2
src폴더 하위에 pages폴더 생성 후 페이지별 파일 생성shared라는 폴더를 만든 후 그안에 Router.js파일을 생성App.js에 가서 Router파일 import 하기사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다.객체 형식으로 보여주기