# useNavigate
[React] react-router-dom
react-router-dom은 웹에서 페이지 이동 기능을 구현하기 위한 라이브러리이다. Routing이란 네트워크간 데이터 전송의 최적 경로를 선택하는 과정이다. 여기서 최적 경로는 최단거리가 될 수도 있고, 가장 빠른 시간에 전달하는 것으로 계산될 수도 있다.Rou
[React] useNavigate / useParams / useLocation / useMatch
사용자가 다른 뷰로 이동 할 때 어플리케이션은 뷰를 동적으로 다시 그려줍니다.SPA는 MPA 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 더 나은 UX를 제공합니다.(= 페이지를 새로고침 하지 않습니다.)React는 라이브러리로 라우팅 시스템을 갖추
react에서 navigate 사용 (useNavigate)
Link는 특정주소로 이동해주는 태그, Navigate는 특정 행동 수행시 해당 주소로 이동할수있게 해준다.useNavigate 사용useNavigate는 양식 제출 혹은 특정 event 발생시 url 조작할 수 있는 interface 제공useNavigate 인자
React - ROUTER v6
SPA (Single-page application)=> 새로고침되지 않고 컴포넌트가 교체되는 듯하게 페이지 이동이 가능CSR (Client Side Rendering)=> 사용자가 필요할 때 데이터를 가져오기때문에 매번 서버에 요청하지 않아도 됨React에서 CSR기
.png)
[React] React Router, page 이동하기
React를 이용할 때 또다른 유명한 library중 React-Router가 있다. React-Router는 React에서 CSR 기반의 page routing을 할 수 있게 해주는 라이브러리이다. 여기서 CSR은 뭐고, page routing은 뭘까? 아래에서
📚 react router additional Hook & Component
이전 포스팅에서 react router에서 주로 사용되는 컴포넌트 및 기술들을 알아보았다.주로 사용하는 것뿐만 아니라 react router로 여러 가지 기능을 구현할 때 필요한 훅이나 컴포넌트들이 있다.본 포스팅에서는 부가적인 훅과 컴포넌트에 대해 알아보겠다.
react-router : navigate
LaunchShoe 컴포넌트를 다시 살펴보자.useParams를 이용해서 shoes db안에 해당 shoes가 없으면 \* 가 목적지인 link를 리턴하게 했다.그러나 다른 방법으로 길을 설정할 수 있다. 바로 useNavigate를 이용하는 것이다.shoes가 없을떄
[React #13] 동적 라우팅과 Path Parameter, 그리고 관련 Hooks
라우팅을 위한 기본 코드 구조 index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역 index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할 Router.j
[React] Link & useNavigate
리액트에서 화면이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보도록 하겠습니다!라이브러리 설치Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.클릭 시 바로 이동하는 로직 구현 시에 사용 용이re
Book Log Ref#01
1. useNavigate 프로젝트 중에 팀장이 사용한 에 대해 정확히 왜 사용하였는지 이해하지 못해 조사해보았다. 일단, replace:true로 설정할때와 설정하지 않을때의 차이점 : true로 설정하면 뒤로가기를 눌렀을때 한번에 이동되지 않는다. 왜일까? replace는 스택의 최상단에 있는 것을 "대체"한다. 예를들어, 홈 → 게시판 → 로...