[리액트 실습] 간단 영화 앱 만들기 7 (상세 페이지 만들기)

* 유튜브 인브로즈님의 실습 영상을 학습한 뒤 작성하는 포스팅입니다. 

 

[리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기)

아마 간단 영화 앱 만들기는 7편을 마지막으로 끝나지 않을까 싶다. 

하지만 필자가 좀 더 배워서 TV프로그램 , 등장인물 등등 여러 페이지를 만들 수 있는 능력과 글을 쓸 수 있는 여유가 된다면 다시 돌아오도록 하겠다 .. 

이번 포스팅에서는 이렇게 영화가 정렬된 화면에서 영화 화면을 누르면 

클릭한 포스터에 맞는 상세 설명 페이지가 나온다. 

상세 페이지는 제목, 포스터 사진, 설명으로 구성해보았다. 

---

1. Route를 이용한 상세 페이지 이동 

 

영화를 클릭했을 때 Route를 이용해 상세페이지로 이동하려고 한다. 

위 사진들과 같이 /movie/+제목으로 주소를 입력해주고 싶다 ! 

 

우선 App.js파일에 Route경로를 추가해준다. 

<Route path ="/movie/:title" element={<MovieDetail />} />​

:title자리에 우리가 원하는 title을 줄 것이다. 

 

---

2. useNavigate()전달, useLocation() 수신

useNavigate()로 페이지를 이동하며 파라미터를 전달하고 useLocation()으로 파라미터를 수신할 수 있다.

영화 앱에서도 이러한 방식을 사용하였다. 

 

useNavigate() 훅은 앞서 짧게 설명한 바가 있다. 

그때 설명이 많이 부족하다고 느껴져 useLocation()와 함께 적어보려한다. 

 

* useNavigate()

1. useNavigate() 훅을 실행하면 페이지 이동을 할 수 있게 하는 함수를 반환한다. 

2.navigate라는 변수를 통해 이 함수를 취득한다.

3. navigate의 인자로 설정한 경로값을 넘겨주면 해당 경로로 이동할 수 있다. 

navigate('/이동경로',{state:{키:값, 키:값, ... }})

 

* useLocation()

1. useLocation() 훅을 실행하면 location을 취득한다.

2. location.state를 통해 useNavigate를 이용해 전송된 파라미터를 받을 수 있다. 

location.state.키

---

3. Movie컴포넌트에서 전달하고 MovieDeail페이지에서 수신받기

Movie.jsx

    const navigate = useNavigate();

    const onClickMovieItem = () => {
        navigate(`/movie/${props.title}`,{
            state : props
    })
    }

 

 

 

영화 앱에서 영화 컴포넌트를 누르면 onClickMovieItem함수가 실행된다 ! 

클릭 시, '/movie'경로로 이동하면서 파라미터 state: props(키: 값) 를 넘겨준다. 

 

 

MovieDetail.jsx

import React from 'react'
import { useLocation, useParams } from 'react-router-dom';
import { IMG_BASE_URL } from '../componenets/Movie';


export default function MovieDetail() {

    // const{ title } = useParams();
    const{ state } = useLocation();
    // console.log(title);
    // console.log(state);

  return (
    <div className ="detail-page-container">
        <div>
            <img src={IMG_BASE_URL + state.poster_path} width = "360px"/>
            </div>
            <div>
            <h1> {state.title} </h1>
            <p>{state.overview}</p>

        </div>
    </div>
  )
}

받아온 값의 이미지, title, overview를 각각 출력해주었다. 

/*상세페이지*/

.detail-page-container{
  display:flex;

}

.detail-page-container img{
  background-color: aliceblue;
  margin:30px;
  border-radius: 3px;

}

.detail-page-container h1{
  font-size: 30px;
  margin: 50px 0 ;
  
}
.detail-page-container p{
  margin: 0 50px 0 0;

}

CSS로 어느정도 다듬어주면 완성 ~ ! 

 

 

*** 참고자료 

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