# dynamic routing
Static Routing / Dynamic Routing
Static Routing과 Dynamic Routing의 차이와 어떻게 만드는지에 대한 포스팅입니다.

Static Routing & Dynamic Routing
네트워크에서 특정 경로로 데이터를 보낼 때 사용되는 과정.크게 정적 라우팅, 동적 라우팅 두 종류가 있다.자유게시판의 상세 내용 페이지를 만든다고 할 때, 정적 라우팅을 사용하면 그 무수히 많은 글들의 정보를 나타내는 페이지를 각각 따로 만들어야 한다.동적 라우팅을 사

Day-5 Static&Dynamic Routing / try~catch
Routing이란 페이지를 이동하는 것을 말한다.Routing을 사용할 때는 router 객체가 필요한데 이는 페이지를 이동하는 도구이다.페이지를 이동하기 위해써 쓰는 함수로는 useRouter가 있다.사용법으로는 const router = useRouter 형식이고r
Static / Dynamic Routing
본론으로 들어가기 앞서, 라우터 객체와 라우팅에 대해서 알아보자.라우터(router)란 페이지 이동과 관련된 기능을 가지고 있는 객체이다이 객체를 사용해서 A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다" 라고 말한다라우팅에는 크게, Static Rou
Web> Path Parameter & Query Parameter
Path Parameter와 Query Parameter을 사용해보고 학습하게된 계기는 이번 팀프로젝트를 진행하면서였다. 내가 맡아 진행했던 부분은 전체 상품페이지 였는데, 전체 상품페이지에 가장 핵심적인 기능으로는 필터링 기능과 원하는 상품을 클릭했을 때 해당 상품의

[React #13] 동적 라우팅과 Path Parameter, 그리고 관련 Hooks
라우팅을 위한 기본 코드 구조 index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역 index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할 Router.j

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

useRouter, 동적라우팅
그냥 리액트만 사용할 때 나는 ... 페이지 이동을 위해서 많은 명령어를 사용했어야 했다. 하지만 넥스트라이브러리를 사용하니, 이렇게 세상 편하게 이동을 할 수가 없어!라우터는 이름에서 알 수 있듯이 페이지 이동을 위해 사용한다.길을 만들어 주는 것 기존의 리액트 라우

Static,Dynamic 라우팅 , 옵셔널 체이닝 , 조건부 렌더링 , try,catch
Static,Dynamic 라우팅 , 옵셔널 체이닝 , 조건부 렌더링 , try,catch

NEXT.js의 Dynamic routing을 이용한 비동기 통신
👉이 글을 읽으면 좋은 사람'동적 라우팅을 통해서 받은 값으로 비동기통신을 하고 싶고, 그로 인한 결과를 화면에 뿌려주고 싶다!'라고 생각하는 사람이번에 어플을 만들면서 동적라우팅으로 모든 것을 해결하려고 했다.여기서부터 모든 문제가 발생했고, 시간이 오래 걸리는 문
TIL. 36 React - Dynamic Routing
Route 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것 을 동적 라우팅Path Parameter 라우트 경로 끝에 들어가는 id 값들을 저장하는 매개 변수이며, Path Parameter는 Routes 컴포넌트 안에서 아래와 같이 정의된다.hist

[Next] Next.js에서의 동적라우팅
Next js에서의 동적 라우팅 방법 1. 받은 값을 2배로 리턴하는 api > 2. 받은 값을 2배로 출력하는 페이지를 생성 > 즉 http://localhost:3000/get-double/[value]의 value값을 동적으로 받아서 double api요청한
.png)
TIL] React-Dynamic Routing
history: push/replace를 사용하여 다른 경로로 이동 할 수 있다.(ex: 로그인 성공시, 로그인 페이지 › 메인 페이지 이동)location: 현재 경로에 대한 정보(+Url query)를 갖고 있다.(ex: 이전 경로/지금 경로 비교가 필요할 경우,

Next.js 라우팅
Next.js의 라우팅에 대해서 적어볼거에요. 요즘 팀프로젝트를 하면서 NEXT를 쓰게 됐거든요. 그래서 기록을 남길겸 혹시 도움 될까 싶어서 써봅니다ㅎㅎㅎ일단 NEXT 프로젝트를 셋팅해야겠죠?을 사용하여 초기세팅을 해줍니다!아니면 직접 세팅할 수도 있어요!!을 입력해