# useParams
React-Router v.6 #2 기본
이렇게 경로에 /:id처럼 집어 넣으면 동적으로 페이지를 생성할 수 있다.그리고useParams를 통해 동적으로 받은 페이지의 내용을 출력할 수 있다.또한map과 백틱을 사용해 동적으로 n개가 들어와도 하드코딩하지 않 링크를 만들어 낼 수 있다.지금까지 해온 링크들은
230216 팀프로젝트 8
오늘은 params 나눠주는 것을 공부했고...! 뭔가 프로젝트하면서 params를 쓸일이 없었는데(근데 진짜 생각해보니까 뭐 제대로 해본게 없는 것같네...? 근데 안써본게 너무 많다...ㅜㅜ;;;;;;) 이번 프로젝트에서... 써봤다...ㅎㅎ param을 사용하는 이유는 간단하다 파이어스토어에 있는 post(컬렉션명)의 id 값을 받아 비교하고 그 값...
Browser React Router, useParams
npm i react-router-dom 리액트 라우터를 사용 할 때, 파라미터의 정보를 가져다가 쓰고 싶다면, useParams라는 훅을 사용하면 된다.useParams 우선 객체 구조분해로, const { id } = useParams()로 설정을 한 뒤,${i
동적 라우팅
오늘의 해결과제는 동적 라우팅을 통한 데이터 받아와서 화면에 출력하기 app.js에서 연결되는 path를 보니 목데이터를 통해서 받아오던 라우팅이 그대로 존재했다. 확인 후 변경 
[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에 대한 내용.
[React] 뒤로가기
리액트로 투두를 만들던 도중,뒤로가기를 할 수 없다는 사실을 깨달았다. 오매?당연히 될줄알았는데... 아니였다!! 😱어떤 동작을 해도 react-router-dom을 통해 쿼리를 설정해 놓지 않는 한은 url이 바뀌지가 않는다.흠.사실 뒤로가기를 내가 스택을 사용해서
[Stack Overflow] 동적 라우팅 구현
여기서 설정한 이름이 params의 key로 들어온다.\* console.log(params)상세 페이지 진입 시 API 호출 주소 : URL parameter에 접근해 데이터(question id 정보)를 받아와서 다시 사용
[Typescript] useParams() 타입 & undefined 에러
react-router v6 이후의 useParams의 타입 선언
[Today I Learned] 12월 2주차 day2
src폴더 하위에 pages폴더 생성 후 페이지별 파일 생성shared라는 폴더를 만든 후 그안에 Router.js파일을 생성App.js에 가서 Router파일 import 하기사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다.객체 형식으로 보여주기
개념 - React Router2
Path Variable - 경로 변수, url에 있는 숫자 번호들ex) /diary/1 , /diary/2useParams로 관리QueryString - ? 키워드 뒤에있는것 가져옴ex) /edit?id=10&mode=darkuseSearchParams로 관리링크 뒤
[React] useParams
useParams는 RestFul API의 경로상 달라지는 부분을 추적해온다.라우터를 다음과 같이 설정해준다.그러면 detail/1, detail/2, detail/3 등등 detail뒤에오는 모든 경로상에서 Itemdetail이라는 컴포넌트가 나타난다.꼭 숫자가 아니
