- React Router는 다이나믹 (동적) url을 지원해주기도 한다.
- 다이나믹하다는 것은 무엇인가? url에 변수를 넣을 수 있다는 것이다. Restful에 한 걸음 더 가까워질 것이다.
sitename.com/dynamic/restful/1234
- 이런 식으로 표현하지 않으면 그냥 텍스트 id인 url로 넘어간다.
- Home 컴포넌트(Movie의 부모 컴포넌트)에서 넘겨주는 Prop에 id를 추가했다.
- Movie에서 그 아이디를 받아 url 링크에 추가했다.
- 아직 데이터를 뿌리는 코드를 작성하지 않아 렌더링 되는 건 없지만 이렇게 url은 제대로 아이디를 받아오는 것을 확인할 수 있다.
- 이 부분을 다시 보자. 이건 말하자면 id를 위한 자리를 마련해 둔 것이다.
- 리액트 라우터에게 여기에 오는 id 값이 무엇인지 알고 싶다고 사전에 이야기 해둔 것이다.
- 리액트 라우터는 url에 있는 값을 반환해주는 함수를 제공한다. 특히 그 값이 변경될 때 말이다.
- 그 함수의 이름은 useParams다.
- useParams에 대한 코드를 Detail 컴포넌트에 작성하였다.
- 링크를 클릭하게 되면 콘솔에 해당 사항에 대한 정보가 잘 찍히는 것을 알 수 있다.
- 그렇다면 지금 내가 보내는 값이 movie 아이템의 id 값이라고 해서,
:id로만 표현해야 제대로 값이 들어올까?
- 아니다. 저건 그냥 표현일 뿐이다.
- 변경되는 값을 탐지해서 보여주는 거지, 쟤가 id라서 가져온 게 아니다.
- 데이터의 흐름을 보자!
- 그리고 이렇게 코드를 수정해서 작성하였다.
- x로 받던 걸,
{id}로 받겠다고 한 것이다.
- 이 때는 땡땡 뒤에 id가 아니라 다른 변수명을 사용할 경우, 콘솔 창에서 undefined라고 말한다.
- Detail 컴포넌트의 부모 컴포넌트는 Routes 밑에서 /movie/:id 경로에 대응하는 Route 컴포넌트입니다. 즉, App.js에서 정의한 <Route path="/movie/:id" element={}> 부분에서 Detail 컴포넌트가 /movie/:id 경로에 매칭될 때 렌더링됩니다.
- 이때 :id 부분은 URL 경로의 일부로 동적 매개변수를 나타내며, 이 매개변수에 해당하는 값은 URL에서 추출되어 useParams()를 통해 접근할 수 있습니다.
- 즉, Detail 컴포넌트에서 { id } = useParams()를 사용하면 URL에서 추출된 동적 매개변수(:id)에 해당하는 값을 가져옵니다. 이 값은 라우팅 시 해당 경로에 따라 달라지며, 예를 들어 /movie/123 경로에 접근하면 id에는 "123"이 할당됩니다.
- 그러나 App.js에서 :star와 같이 :id가 아닌 다른 동적 매개변수를 사용하면, Detail 컴포넌트에서 useParams()를 통해 해당 매개변수를 가져올 수 없습니다. 따라서 useParams()에서 :star와 같이 정의되지 않은 매개변수를 사용하면 undefined가 반환됩니다.
- Detail 컴포넌트에서 { id }는 useParams()로부터 가져온 동적 매개변수 :id의 값을 의미합니다. 이 값은 App.js에서 정의한 라우팅 경로에 따라 달라지며, 해당 영화의 고유한 ID를 나타냅니다.
Q.
const id = useParams()와const { id } = useParams()의 차이?
- A. const id = useParams()를 사용하면 id 변수에 객체가 할당되며, const { id } = useParams()를 사용하면 id 변수에 동적 매개변수의 값이 직접 할당됩니다. 일반적으로 동적 매개변수를 추출할 때는 객체 구조 분해를 사용하여 원하는 값을 추출하는 것이 편리합니다.
- const id = useParams():
- useParams() 훅의 반환 값은 객체입니다.
- 이 객체에는 URL 경로에서 추출한 동적 매개변수가 속성으로 들어있습니다.
- const id = useParams()를 사용하면 동적 매개변수 중 하나를 변수 id에 직접 할당합니다.
const id = useParams();
// id는 객체 { id: "123" }와 같은 형태- const { id } = useParams():
- 객체 구조 분해를 사용하여 useParams()에서 반환한 객체의 특정 속성(id)을 추출합니다.
- 이 방법을 사용하면 id 변수에 동적 매개변수의 값이 직접 할당됩니다.
const { id } = useParams();
// id는 문자열 "123"과 같은 값동적 매개 변수와 객체 구조 분해란?
- 동적 매개변수(Dynamic Parameters)와 객체 구조 분해(Object Destructuring)는 JavaScript와 React에서 많이 사용되는 개념입니다.
- React에서는 주로 객체 구조 분해를 사용하여 상태(State)나 프롭스(Props)에서 필요한 값을 추출하는 데 활용됩니다.
- 따라서 동적 매개변수는 URL에서 값을 추출하고, 객체 구조 분해는 객체의 속성을 변수로 추출하는 데 사용되며, React와 같은 라이브러리에서 주로 함께 활용됩니다.
- 동적 매개변수 (Dynamic Parameters):
- 동적 매개변수는 URL에서 값을 동적으로 받아오는 데 사용됩니다. 이것은 일반적으로 웹 애플리케이션에서 페이지 라우팅에 관련이 있습니다.
- React Router와 같은 라우팅 라이브러리에서 사용되며, URL 경로에서 값을 변수로 추출할 때 동적 매개변수를 사용합니다.
- 예를 들어, /product/:id와 같은 URL 경로에서 :id는 동적 매개변수로, /product/123과 같은 URL에서 123은 동적 매개변수의 값입니다.
- 객체 구조 분해 (Object Destructuring):
- 객체 구조 분해는 객체의 속성을 추출하여 변수에 할당하는 JavaScript 기능입니다.
- 예를 들어, 다음과 같이 객체의 속성을 추출하고 변수에 할당할 수 있습니다
const person = { name: "John", age: 30 };
const { name, age } = person;React Router를 사용할 때, 동적 매개변수는 URL 경로의 일부로 사용되며, 이러한 동적 매개변수의 값은 해당 URL로 라우팅될 때 컴포넌트에 전달됩니다. 이것을 예를 통해 설명해보겠습니다.
- 라우터 설정
- 예를 들어, 다음과 같이 App.js에서 React Router를 설정했다고 가정합니다:
<Route path="/movie/:id" element={<Detail />} />- 이 설정은 URL 경로에서 /movie/ 다음에 오는 동적 매개변수 :id를 포함하는 URL에 대응합니다.
- URL 접근
- 사용자가 웹 애플리케이션에서 /movie/123과 같은 URL로 이동하면, React Router는 해당 URL을 해석하고 /movie/:id 경로와 일치시킵니다.
- 라우팅 및 매개변수 전달
- /movie/:id 경로와 일치하는 경우, Detail 컴포넌트가 렌더링됩니다.
이때, 동적 매개변수 :id의 값인 "123"이 Detail 컴포넌트에 전달됩니다.
- 매개변수 사용
- 이제 Detail 컴포넌트에서 useParams() 훅을 사용하여 동적 매개변수 값을 가져올 수 있습니다.
- 예를 들어, const { id } = useParams()를 사용하면 id 변수에 "123"이 할당됩니다.
- 따라서 const { id } = useParams()는 동적 매개변수 :id의 값을 추출하여 id 변수에 할당하고, 이 값을 컴포넌트 내에서 사용할 수 있게 해줍니다.
- 반면에 const x = useParams()는 동적 매개변수가 포함된 객체를 x 변수에 그대로 저장합니다. 따라서 x.id와 같이 객체의 속성을 통해 동적 매개변수 값을 가져와야 합니다.
- 선택적으로, const x = useParams()를 사용하면 여러 개의 동적 매개변수를 한 번에 가져올 수도 있습니다.
예를 들어, URL 경로에 /movie/:id/:category와 같은 두 개의 동적 매개변수가 있다면, const { id, category } = useParams()를 사용하여 두 가지 매개변수를 한 번에 추출할 수 있습니다.
- await, async를 이용해서 (fetch-then이 아니라) id값에 대한 영화 데이터를 받아왔다.
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
function Detail() {
const { id } = useParams();
const [movieData, setMovieData] = useState([]);
const getMovie = async () => {
const response = await (
await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
).json();
console.log(response.data.movie);
setMovieData(response.data.movie);
};
console.log(id);
useEffect(() => {
getMovie();
}, []);
return (
<div>
<h1>Details</h1>
<hr />
<img
src={movieData.background_image_original}
alt="background_image_original"
/>
<h1>{movieData.title}</h1>
<p>{movieData.description_full}</p>
</div>
);
}
export default Detail;
- 받아온 json 데이터를 useState 함수를 통해 어떤 state에 세팅시키고 그걸 그대로 뿌리면 되는 것이다.
- 참고로 map 함수를 사용할 필요는 없다. map 함수는 배열에서만 사용 가능하다.
Working Abroad ...