# useParams

22개의 포스트

[React] react-router-dom

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

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

Route state

Coins.tsxCoin.tsxuseParamsRouter.tsx에서 저장한 형식대로 url 파라미터 정보 사용가능Router.tsxCoin.tsx형태로 사용 가능

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

useParams

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

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

React - ROUTER v6

SPA (Single-page application)=> 새로고침되지 않고 컴포넌트가 교체되는 듯하게 페이지 이동이 가능CSR (Client Side Rendering)=> 사용자가 필요할 때 데이터를 가져오기때문에 매번 서버에 요청하지 않아도 됨React에서 CSR기

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

[React] React Router, page 이동하기

React를 이용할 때 또다른 유명한 library중 React-Router가 있다. React-Router는 React에서 CSR 기반의 page routing을 할 수 있게 해주는 라이브러리이다. 여기서 CSR은 뭐고, page routing은 뭘까? 아래에서

2022년 3월 20일
·
0개의 댓글

22.03.12

import { useParams } from "react-router-dom";<Route path="/day/:day" element={} /> // 콜론(:)이 중요하다.const day = useParams();//day에 {day:'2'} object가

2022년 3월 12일
·
0개의 댓글

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

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

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

React Router - 상대경로 + 그 길이 어디로 이어지는지(컴포넌트 소개)

우선 Routes안에서 어느 한쪽 길에 도달하게 되면, 즉 path가 맞아떨어져서 특정 컴포넌트가 랜더링 되면 다른 Route는 실행되지 않는다.일단 이걸 염두해두고 path에 들어가는 \* 기호에 대해서 알아보자.보면은 path \* 가 가장 아래에 위치해있다. 즉

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

useParams

import { useParams } from "react-router-dom";const day = useParams();//day에 {day:'2'} object가 담긴다.const {day} = useParams();//day에 2 string이 담긴다.react

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

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

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

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

[React] useParams() 사용하여 파라미터 가져오기

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams()라는 훅을 사용하면 된다. 라우터를 사용하고 있다는 가정 하에 useParams 사용 방법에 대해 알아보도록 하겠다.1) useParams를 import 한다.2) useParams

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

[React][Router] useParams, useLocation

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

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

[개발지식] URL 활용하여 variables 확보하기

query string 관련 - URL에서 변수 확보하기 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4 window.location.path

2021년 12월 21일
·
0개의 댓글
post-thumbnail

React - useParams()

Advanced Router

2021년 12월 19일
·
0개의 댓글

[React] routes 파일

코드가 길어질수록 를 계속 반복해서 사용하게 됩니다. 이런 문제점을 해결하기 위해서 routes 파일을 따로 만들어서 모든 route 객체들을 관리해줍니다. routes 파일각각의 page를 import 하고, 각 route 객체의 path와 component를 rou

2021년 12월 18일
·
0개의 댓글

React-Router.2 Hooks

react-router-dom 5.1v 부터 3가지의 hooks을 제공합니다.설치는 이전과 동일합니다.터미널에 react-router-dom 설치 1\. yarn add react-router-dom2\. npm install react-router-domuseHist

2021년 5월 22일
·
0개의 댓글

useHistory, useLocation, useParams

useHistory, useLocation, useParams

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