동적 라우팅 (feat. monsters)

Beom·2022년 5월 7일

WE-CODE

목록 보기

6/8

Detail 페이지로 이동

라우터 설정을 해준다

몬스터 디테일에서 이동할 페이지

<Route path="/monsters/detail/:monsterId element={<MonsterDetail/>} />

2.카드리스트에서 카드를 눌렀을 때 이동한다

useNavigate를 활용한다

const moveDetail = () => {
  navigate('/monsters/detail/');

카드를 클릭했을 때 이동해야 하므로 카드에 onClick 이벤트를 작성해준다

onClick={moveDetail}

ID값에 따른 Detail 페이지 이동

위에서 작성한 곳에 뒤에 아이디 값에 따른 페이지 이동을 시켜주어야 한다

const moveDetail = () => {
  naviagte('/monsters/detail/${props.id}')

백틱으로 감싸야 ${} 표시를 사용할 수 있다
움직이는 곳은 아이디값에 따라 달라진다

데이터 fetch

위에서 라우터 주소에 값을 입력해주는 것까지 완료하였다
몬스터 디테일 컴포넌트에서 아이디 값에 해당하는 데이터를 받아와야 해당 아이디값에 따른 페이지 이동이 가능하다
(라우터 설정만 한 뒤에는 어떤 카드를 눌러도 똑같은 기본 몬스터 카드만 나온다 -> 해당 아이디에 관련된 내용이 나오도록 출력이 되어야 한다)
주어진 주소로 들어가서 엔드포인트에/users/ 를 넣어서
https://jsonplaceholder.typicode.com/users/
검색해보면 모든 유저에 대한 데이터를 확인할 수 있다
뒤에 /원하는데이터번호 를 입력하면 해당 아이디값에 대한 데이터를 확인할 수 있다
몬스터 디테일로 들어가 useEffect를 작성하여 데이터를 fetch 해온다
-> 콘솔 찍으면 데이터를 가져오는 것을 확인할 수 있다
useparams 훅을 활용하여 아이디값에 따라서 데이터 를 다르게 받아오도록 작성한다

const params = useParams();

훅을 실행하면 결과값은 객체이다 ->path parameter값에 대한 객체가 생성된다
params 출력을 해보면 객체에 정보가 담겨서 출력되는 것을 알 수 있다
여기서 key 이름은 라우터에서 설정한 path parameter이며 라우터에서 설정한 이름대로 파람스에서 객체 이름이 설정된다

조건부 렌더링

카드를 눌렀을 때 먼저 초록괴물 나온뒤에 해당 아이디 값의 정보로 바뀌는데 이것은 useEffect 일어나는 시점과 관련있다
컴포넌트가 마운트 된 이후에 실행 되기에 초록괴물이 먼저 나온다
실행순서는 먼저 리턴을 통해서 ui를 그려주고 useEffect통해서 데이터 받아오고 몬스터 스테이트 안에 저장해준다
함수 컴포넌트가 다시 실행이 되면서 새롭게 Fetch 함수를 통해서 받아온 데이터를 사용해서 카드를 그릴 수 있게 된다. 이후에 화면에 몬스터에 대한 정보가 나타나게 되는 것이다
만약에 데이터가 들어오지 않았다면 화면에 표현하지 말아라 라고 로직을 작성해준다
데이터가 안들어온것을 어떻게 판별할까?
들어오지 않았을때는 빈객체이다 -> 프로퍼티로 접근하면 빈객체일때는 정보가 없기 때문에 undefined출력될 것이고
이후에 데이터가 들어오면 truthy한 값으로 바뀌면서 뒤에가 실행되어 화면에 출력된다

버튼 구현

previous -> url 아이디값을 빼준다
next -> url 아이디값을 더해준다
next 버튼을 눌렀을 때 문자열처럼 1이 더해지는데 이것 params 안에 객체는 문자열처럼 더해지기 때문이다 (빼기는 문자열에 없기 때문에 알아서 숫자로 바꾸어서 빼줌)
-1은 제대로 실행된다 (+는 문자 연산으로 인식해서 뒤에 1을 그냥 그대로 출력한다

const goToPrevious = () => {
  navigate('/monsters/detail/${params.monsterId -1}');

const goToNext = () => {
  navigate('/monsters/detail/$Number(params.monsterId) + 1}');

해당 로직 작성 후 버튼에 onClick 이벤트에 작성해준다
뒤에 Url도 백틱으로 감싸서 사용해야한다

데이터 잘 받아오는 것을 확인한 후에 url 번호 바뀌면
그 다음 해당 데이터 값을 받아오도록 데이터 fetching 해주어야한다
원래 useEffect에서 의존성 배열을 활용하면 된다
의존성 배열에 넣어준 값을 보고 있다가 변하는 경우에 다시 side Effect 실행시켜준다
해당 path parameter 값을 의존성 배열에 넣어주면
아이디가 변할때마다 새로 fetch 데이터를 받아올 수 있다