#5 MOVIE MODAL

React Router 5->6 변경된 점 

1. useHistory() => useNavigate()
```
// Home.tsx
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

    const onBoxClicked = (movieId: number) => {
        navigate(`/movies/${movieId}`); 클릭하면 해당주소로 바뀜
    };

    <Box
                                            onClick={() => //바로 실행되면 안되고 클릭하면 실행되야함 
                                                onBoxClicked(movie.id) //
                                            }   
                                        >

// App.tsx
< Route path="/" element={< Home />}/>
< Route path="movies/:id" element={< Home />} />

"/" , Nested Route  "movies/:moveId" 일 때 <Home/>을 그려라

 

2. useRouteMatch() => useMatch()
```
import { useMatch, PathMatch } from "react-router-dom";

const moviePathMatch: PathMatch< string> | null = useMatch("/movies/:id");
```
https://reactrouter.com/docs/en/v6/upgrading/v5#replace-useroutematch-with-usematch

Upgrading from v5 v6.3.0

  <Box
                                            layoutId={movie.id + ""} //layoutId string이여야함

  </Box>

                    <AnimatePresence>
                        {bigMovieMatch ? (   useMatch("/movies/:id")이 주소가 맞으면 모달창을 띄어라
                            <motion.div
                                layoutId={bigMovieMatch.params.movieId}
                                style={{
                                    position: "absolute",
                                    width: "40vw",
                                    height: "80vh",
                                    backgroundColor: "red",
                                    top: 50,
                                    left: 0,
                                    right: 0,
                                    margin: "0 auto",
                                }}
                            ></motion.div>
                        ) : null}
                    </AnimatePresence>

 

박스 외 클릭하면 home으로 이동

 

 

top:50때문에 빨간 박스가 스크롤과 상관없이 위에 고정되어있다.

scrollposition을 알아야함

 

 

import { motion, AnimatePresence, useScroll } from "framer-motion";

    const { scrollY } = useScroll();

   <motion.div
                                    layoutId={bigMovieMatch.params.movieId}
                                    style={{
                                        top: scrollY.get() +50,  //get()
                                        left: 0,
                                        right: 0,
                                        margin: "0 auto",
                                    }}
                                ></motion.div>

top: scollY ////스크롤과 상관없이 맨위에 붙어있음

top: scrollY +50 하면 motionValue에 number을 더해서 오류가 남

 

BigCover에<src=makeImage()> 속성으로 이미지를 줬었는데 작아져서 

<BigCover

  backgroundImage:`url(${makeImage(...)})`

>

배경속성으로 바꾸고

    background-size: cover;
    background-position: center center;을 사용함 

 

<BigCover
                                                style={{
                                                    backgroundImage: `linear-gradient( to top , black, transparent ), 
                                                    url(
                                                      ${makeImagePath(
                                                          clickedMovie.backdrop_path,
                             
                                                      )}
                                                    )`,
                                                }}
                                            >

useSearchParams

useSearchParams는 현재 URL의 query 문자열을 읽고 수정하는데 사용됩니다 js기능! 

 

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

function Search() {
    const location = useLocation();
    const keyword = new URLSearchParams(location.search).get("keyword");
    console.log(keyword);
    return null;
}
ex.

 

const paramsString="?keyword=%EB%A9%94%EC%9D%B4"
const searchParams = new URLSearchParams(paramsString);

searchParams.get("keyword");