# useNavigate

81개의 포스트
post-thumbnail

[Problem] useNavigate로 이전페이지를 돌아가면 기존 값이 저장되지 않은채로 렌더링되는 문제

홈페이지에서 평점을 바꾸고 상세페이지로 진입 후 뒤로가기를 클릭하게 되면, 바뀐 평점 페이지가 아닌 디폴트로 설정해놓은 평점이 반영된 영화리스트가 나옴2번으로 해결해보기로 함 !useReducer를 사용해보고 싶어서 여기서 이용해볼까 하다가 목적이랑 완전이 부합하지 않

2023년 11월 22일
·
0개의 댓글
·
post-thumbnail

리액트 Router 정리

사용자가 클릭해서 페이지를 이동하도록 할 때 사용페이지 이동 버튼, 이미지에 사용하면 된다.Navbar에 쓸떄는 Navlink를 주로 쓴다.사용예시특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용 회원 전용 페이지에 로그인없이 들어올때 사용하자특정한

2023년 11월 21일
·
0개의 댓글
·
post-thumbnail

useNavigate를 사용한 페이지 이동(4)

현재 로그인 버튼의 기능은 id와 password를 둘 다 입력했을 때 버튼 색상이 활성화 되는 것이다.이 기능에 더해 버튼을 클릭했을 때의 페이지 전환을 해줘야 된다.페이지 전환을 위해서 useNavigate를 사용할 줄 알아야 한다.react-router-dom은

2023년 10월 26일
·
0개의 댓글
·

풀스택 웹개발 부트캠프 13주차 (2)

React Router 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 주요 컴포넌트 BrowserRouter Routes Route Link createBrowse

2023년 10월 18일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 1일차

초기화면로그인실패 경고창로그인실패시 ID와PASSWORD 가 초기화됨 로그인성공 useNavigate 미적용 경고창으로 대체!1차 프로젝트 1일차에서 로그인페이지 부분을 담당하게 되었고 아래처럼 로직을 완성하였다.

2023년 9월 11일
·
0개의 댓글
·

TIL)단일 페이지 로그인 토큰 보관에 대해서 .

useLocation 과 useNavigate 훅 단일 페이지에서 로그인 토큰을 어떻게 가지고 있을지 많은 고민을 하게 되었다.

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

React Router

단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다.터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.package.json 파일에서 react-router-dom이 정상적으로 설치되었는지

2023년 8월 25일
·
0개의 댓글
·
post-thumbnail

[감정 일기장] 페이지 구현 - 홈(/)

해당 월에 대한 일기 데이터만 필터링해서 보여주기comparecompare 함수는 최신순 정렬을 위해 작성되었다. b.date에서 a.date를 뺀 결과가 양수이면 b가 a보다 배열의 뒤에 위치하게 된다.

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

페이지 이동을 할 때, 새로 로딩을 하지 않고 이동해보자

키워드 Web APIs - History React Router - NavLink, Link, Navigate, useNavigate 최종 목표 React에서 라우팅 처리에 대해 배워보자. 현재 목표 페이지 이동을 할 때, 새로 로딩을 하지 않고 이동해보자. 현재

2023년 8월 11일
·
0개의 댓글
·
post-thumbnail

[23.08.02] 리액트 라우터 - useNavigate 로 데이터 보내고 useLocation 으로 데이터 받아오기 !

React-Router useNavigate (Hook) : useNavigate는 지정한 경로로 페이지를 이동시키는 기능과 두번째 인자를 통해 이동시킬 페이지에 보낼 데이터를 지정하는 기능도 가지고 있다. 1) 페이지 이동을 위한 경로 지정 - 지난 게시글 참고

2023년 8월 2일
·
0개의 댓글
·

Vitest - useNavigate 테스트

vitest 환경에서 react-router-dom > useNavigate 테스트에 관한 글입니다.테스트 대상 컴포넌트에서 useNavigate 함수를 통해 페이지 전환하는 경우, 원하는 페이지로 이동되는지를 테스트.ex) 목록화면에서 등록버튼 클릭 시 등록화면으로

2023년 8월 2일
·
0개의 댓글
·
post-thumbnail

[React] 리액트 라우터로 SPA 개발하기

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 만약 자신이 애플리케이션을 만들 때 하나의 페이지로 충분한 것도 있지만, 블로그 같은 애플리케이션을 만든다면 여러 페이지가 필요할 것이다. 이렇게 여러 페이지

2023년 8월 1일
·
1개의 댓글
·
post-thumbnail

[23.07.27] 리액트 라우터 - useNavigate vs Link

: 다른 페이지로 보내고자 할 때 path로 페이지를 이동 시킬 수 있음.useLocation : 현재 위치하고 있는 페이지의 여러가지 정보를 얻을 수 있음.useParams: 현재 routing 페이지로 넘어온 parameter들에 대한 정보를 얻을 수 있음. ->

2023년 7월 27일
·
1개의 댓글
·
post-thumbnail

230621 & 230622 & 230623 Emotiondiary

상태변화 코드 분리useState의 단점: 컴포넌트 밖에서 사용할 수 없음=> useReducer 컴포넌트 밖에서 사용 가능!useReducer(): 상태 변화 코드를 분리시켜서 사용 가능상태최적화useMemo() 사용 => 메모이제이션 기법useMemo(callbac

2023년 6월 21일
·
0개의 댓글
·

05. 30 useNavigate

처음으로 아예 처음부터 만드는 project 중 생긴 issue.만약 클릭 시 정보를 가지고 페이지를 전화하려면 예전에는 useHistory를 썻으나, 이제는 navigate로 전환이 되었다.기억 또 기억.

2023년 5월 30일
·
0개의 댓글
·

[ useNavigate ] 특정 경로로 이동시키자.

회원가입 완료 버튼을 누르면 회원가입화면에 머물러 있는 것이 아니라, 로그인 페이지로 넘어가도록 설계한다면 useNavigate를 모르면 안될것이다.useNavigate 이라는 Hook을 이용하면 간편하게 특정 경로로 이동시키고 특정 경로로 리다이렉트가 가능하도록 도와

2023년 5월 17일
·
0개의 댓글
·

Route에 입장권한을 부여해보자.

삼항연산자로는 수많은 Route를 엮기에는 너무나 복잡하였다. 같이 프로젝트를 하던 동료중에 useLocation을 이용한 방법이 있다고해서 GPT에게 물어본뒤 다음단계로 진행하였다.로그인 판별 여부를 판단해주는 상태관리 useEffect,현재 App의 location

2023년 5월 17일
·
0개의 댓글
·

[React] 컴포넌트 사이에서 데이터 주고받기 (useNavigate & useLocation)

컴포넌트간에 useNavigate 훅을 사용하면서 데이터를 함께 넘겨주고 싶을 때가 있다.이럴 때에는 useNavigate와 useLocation을 적절히 활용해주면 된다.위의 UserCard 컴포넌트에서는 user state에 유저 정보를 담고 있다.해당 컴포넌트를

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