React JS(react의 기초)

다시 영화진흥 위원회에서는 더 많은 정보를 찾을 수 없어서 yts 사이트에서 가져왔다. 

App 컴포넌트에서 다른 컴포넌트(Movie)를 열어 사용할 수 있도록 하였다.

//App
import Movie from "./Movie";
function App() {
	생략

    return (
        <div>
          <h1>Boxoffice List</h1>
          {loading ? (
            <h1>Loading...</h1>
          ) : (
            <div>
              {movies.map((idx) => (
                <Movie
                  key={idx.id}
                  coverImg={idx.medium_cover_image}
                  title={idx.title}
                  summary={idx.summary}
                  genres={idx.genres}
                />
              ))}
            </div>
          )}
        </div>
      );
  }
  export default App;

 

//Movie

  function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>{genres}</ul>
    </div>
  );
}
export default Movie;

부모컴포넌트인 App에서 Movie 컴포넌트로 데이터들을 props해줬다. 

여기서 다시한번 보고 갈 것은 Movie 에 key값을 할당해 주어야 한다는 것.

 

그리고 하나 Proptypes라는 것을 사용해 볼것이다. 이게 무엇이냐면 props에 유효하지 않는 값이 들어오면 경고문이 뜨게 할 수 있다. 만약 string이 넘어와야 하는데 number가 넘어오면 경고를 뜨게 할 수 있는 것이다.

import PropTypes from 'prop-types' //import해준다.

function Movie({ coverImg, title, summary, genres }) {
  return (생략...);
}

Movie.propTypes = {
    coverImg: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;

 

잘못된 타입이 넘어오면 아래처럼 에러가 뜬다.

 

이제 홈화면, 페이지별 화면을 띄우기 위해 react-router-dom을 인스톨해준다.

---

react-router-dom에 대해 알아보자

현재 v6에서는 이전 버전보다 많이 간결해졌다.

이전에 사용한 Switch요소는 사용하지 않고 Routes로 변경되었다.

Switch 컴포넌트를 사용하여 중첩된 경로를 처리하기 위해 별도의 논리를 구현해야했지만  Routes 컴포넌트를사용하여 간단하게 중첩된 경로를 처리할 수 있다.  

//v6이전버전 예시
return (
    <BrowserRouter>
    	<Switch>
            <Route path="/">
            	<Home />
            </Route>
        </Switch>
    </BrowserRouter>
);

//v6이후
return(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
        </Routes>
    </BrowserRouter>
);

Route 의 path="/"는 URL을 보고있다. 누군가가 웹사이트의 "/"에 있다면

element 안에 들어있는 Home 컴포넌트를 보여준다.

Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜준다.

 

이제 URL에 변수를 넣어보자.

Route pathe="/movie" 뒤에 "/movie/변수"로 유저를 다른 경로로 보낼 수 있다. 

변수 앞에는 반드시 : 를 붙여야 한다. 안쓰면 그냥 /movie/id로 보내버린다. 말그대로 텍스트 "id"로 보낸것이다. 

 

처음 부모컴포넌트에서 id를 넘겨주고, 자식컴포넌트에서 id를 받는다.

이제 React Router에서 제공하는 함수(useParams)를 사용하여 URL에 있는 값을 반환해보자.

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

function Detail() {
    const x = useParams()
    console.log(x)                //x 는 url에 있는 id값을 반환한다.
    return <div>Detail</div>
}
export default Detail;

그리고 React Router는 내가 Route에 써둔 변수명을 그대로 사용하고 있다. 

이제 받은 id 가지고 API 요청을 하면 된다.

function Detail() {
    const {id} = useParams()
    const getMovie = async () =>{
        const json = await(
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json();
            console.log(json)
    }
    useEffect(()=> {
        getMovie();
    },[])
    return <div>Detail</div>
}
export default Detail;

내가 보고싶은 영화 제목을 클릭하면 해당 영화의 id 값으로 원하는 정보를 받아온다.

받아온 정보를 토대로 해당 영화의 정보를 보여주면 끝.