React Router는 다이나믹 URL을 지원한다.
(다이나믹 URL : url에 변수를 넣을 수 있다는 뜻. )
다이나믹url을 만들기 위해서는 몇가지 절차를 따라야한다.
예시로 보는 Route 사용법)
(react-route-dom @5버전이며, 6버전은 사용법이 다르다.)
App.js 구성
( 슬레쉬 뒤의 문자는 사용자가 원하는대로 작명이 가능하다) (영화의 상세설명을 보여 줄 페이지. 현재는 단순Text만 기입되어있다.) (메인페이지(첫화면)이자 Movie 컴포넌트를 받는 부모컴포넌트. API 정보를 state에 담아 Movie에 뿌려준다)//
App.js에서 사용하진 않지만 Home컴포넌트의 자식 컴포넌트로서 Movie 컴포넌트도 있다.
Movie( Home 컴포넌트의 자식 컴포넌트로, API에 받은 정보를 가공하여 부모로 넘긴다)
- Detail을 감싸는 Route의 path="/movie뒤에 자신이 사용할 변수를 삽입한다.
<Route path="/movie/:변수>
변수는 자신이 사용할 변수 명으로,콜론은 필수로 기입하여 변수명을 작성한다.
위와 같이 작성하면, /movie를 기본으로 하고
(/:변수)를 통해 보여줄 각기 다른 페이지를 만들 수 있다. ex) /movie/:변수
2.실제 영화 정보를 가공하여 화면에 뿌려주는 Movie 컴포넌트 내에서
Link 태그를 만들어 유저를 "/movie/변수"의 경로로 Detail 페이지로 보낼 수 있게 만든다.
(를 통해 Detail로 넘어가게 할 수 있다는 뜻.)
( /:변수 설정을 하지 않으면 Detail 컴포넌트를 재사용하지 못하고 Text만 담겨 있는 하나의 Detail 컴포넌트만 보인다.)
- Movie 컴포넌트는 직접 변수를 받고 있지 않기에, (받을수도 없다.)
Home.js 내의 Movie컴포넌트로 변수로 설정할 props를 전달한다.
Home.js
<Movie id={movie.id} ... />
Movie컴포넌트가 변수를 직접 받을 수 없는 이유 ?
Home컴포넌트에서 API를 통해 받아온 데이터 중 id라는 데이터 묶음을 변수로 사용할 것이기에,
그 데이터 묶음 id를 프롭스로 넘겨주어야 하기 때문이다.
id라는 데이터를 변수로 사용하려는 이유?
사용자가 디테일 페이지로 넘어가는 경로를 설정하려면,
각각의 영화마다 다른 디테일페이지로 넘어가는 경로를 수작업해야 하는데,
수정,변경사항이 있을때마다 일일히 바꿔줄 수는 없기 때문이다.)
(한 마디로 받아온 데이터로 모든 것을 처리하기 위함이다.)
- id값이 어떻게 오는지 알면 url에 요청을 보낼 수 있다.
url은 id값을 요구한다.우리는 여기 오는 id값을 알아야한다.
id의 자리를 만들어 놓음.
url의 이 부분에 오는 값이 뭔지 아는건 매우 쉬움
Home에서 useState함수를 사용중.
React Router에서 제공하는 함수
url에 있는 값을 반환해주는 함수
특히 url에 있는 변수값 useParams라는 함수만 불러오면 된다
useParams
console.log 뭘 반환해주는지 알아보자
id , 이보다 더 쉬울 순 없지다시 home으로 돌아와서
useParams활용법
App.js에서 찍힌 해당 컴포넌트에 포함된 Route path에 변수를 적는다.
Route가 설정된 컴포넌트.js로 들어가 변수 이름에 맞게 useParam를 설정한다
ex) Details라는 컴포넌트의 Route path의 변수가 :tomato라면
1. import { useParams } from 'react-router-dom'으로 useParams를 import하고
const { tomato } = useParams() 로 사용한다.
useParams를 사용함으로서 :id의 변수 값을 넘겨준다.
이렇게 변수 값을 받을 수 있다면 API에 요청을 보내는 것만 남는다.
id(변수)에 들어오는 값을 정확히 알아야 하는 이유 ?
지금 Detail 컴포넌트는 각 숫자마다 다른 url로 접속되지만 하드코딩된 Text만 보여주고 있다.
클릭된 영화에 맞는 상세페이지를 보여주려면 , 각 영화에 맞는 상세페이지로 이동할 수 있는 id값을 알아야한다.
npm i gh-pages
finish product
html css js
react helmet
뒤로가기 버튼 만들기 ( O )
프라이스 탭 데이터 만들기
차트를 candle chart로 바꾸기
https://quotation-api-cdn.dunamu.com/v1/forex/recent?codes=FRX.KRWUSD%20
환율
천단위점찍기(toLocalString 안될때 사용)
.replace(/\B(?<!.\d*)(?=(\d{3})+(?!\d))/g, ',')
