[에러] props의 값이 들어오지 않는다.

http://www.yes24.com/Product/Goods/90344496

Do it! 클론 코딩 영화 평점 웹서비스 - YES24

내용 소개 

 

p228부터는 route props의 값을 이용해 영화 데이터를

상세 정보 컴포넌트에 전달하는 기능을 사용하기 있다. 

※ route props란 라우팅 대상이 되는 컴포넌트에 넘겨주는 기본 props이다. 

 

문제점 

About.js, Navigaion.js, Detail.js에 props값이 오지 않고 있다.

 

해결방법

위 문제점은 react가 v6로 업그레이드 하면서 라우터 기능이 달라졌기 때문이다. 

라우터 이동시 state값을 받아오기위해 useNavigation과 useLocation을 사용해야 한다. 

 

1. 라우터로 전송값을 주어야 하는 js파일을 수정한다. 

기존 Link 태그는 지워야 한다. 

import { useNavigate } from 'react-router-dom';

function Movie({ title, year, summary, poster, genres }) {

  const navigate = useNavigate();

  const move = () => {

    navigate('/movie-detail', {

      state: { year, title, summary, poster, genres }

    });

  }

 

2. 라우터로 전송값을 받아야 하는 js파일을 수정한다. 

import { useLocation } from 'react-router-dom';

import './Detail.css';

export default function Detail() {

  // 1. useLocation 훅 취득

  const location = useLocation();

 

  // 2. location.state 에서 파라미터 취득 - 타입을 지정해줌.

  const state = location.state ;

  const year = state.year;

  const title = state.title;

  const summary = state.summary;

  const poster = state.poster;

  const genres = state.genres;

 

위 과정을 수정하면 아래와 같이 정상작동된 화면을 볼 수 있다.

책을 보면서 코드 에러인지 확인하고

어떤 점이 문제였는지 확인하는데 시간이 많이 들었다.

특히나 구글링을 해도 정보가 없어...시간소비가 많이 들었다.

 

구글링을 할 때는 문제점 확인하고 비슷한 예시를 찾는 것이 가장 도움이 된다.

필자가 참고한 블로그이다. 

 

책에서는 리액트v5버전이라 코드가 조금씩 다르다.

저자의 강의에서는 언급이 없으니...다들 알아서 코드를 수정해야한다.

 

책에서 진도나간 것은 모두 해결했으니,

이제는 리팩토링 과정만이 남았다.

[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation()