[영화 앱] 검색어로 영화 데이터 요청(API)

 

 

App.js에서 검색어로  영화 데이터를 가져오게 만들거임

 

 

  //영화 데이터 가져오기 await를 써서 async를 써야함
  const getMovieRequest = async (searchValue) => {
    const url = `https://www.omdbapi.com/?apikey=6862e21d&s=${searchValue}`;
    const response = await fetch(url); //데이터를 받아올 때 까지 기다림 await
    const responseJson = await response.json(); //결과 -> json으로 변환
    console.log(responseJson);
  };
  //실행해보기
  getMovieRequest("amazing");

 

url로 검색을 하는데 

아까 발급받은 본인 api 키를 넣어주고 검색 값도 넣어줌 

포스트맨 테스트한 주소 복사함 

 

그리고 그 결과가 나올 때 까지 기다려야 하기때문에 

url의 결과가 나올때까지 기다린다고 

await를 사용함 

await를 사용하기 위해서는  async가 꼭 붙어야함 

 

 

그리고 그 결과 값을 json 형식으로 변환을 하고 그 값을 또 기다림

 

responseJson을 콘솔로 출력하고 테스트해봄 

 

 

 

 

콘솔창에 amazing이 들어간 결과값이 나오는지 체크함

 

 

한 번만 실행하게끔 useEffect()를 사용한다

  //한 번만 실행
  useEffect(() => {
    getMovieRequest("amazing");
  }, []);

 

 

그리고 이제는 console에 출력하는 것이 아닌 useState에 넣어줄거라서 

 

setMovies에 넣어준다. 

 

reponseJson의 Search는 어떤 값이냐면 

아까 콘솔에서 확인했듯이 

영화의 정보는 Search라는 이름으로 배열에 담겨서 가져오기 때문에

우리는 Search의 값이 필요하다. 

 

 

 

 

그리고 테스트용으로 넣어놓은 초기값을 빈 객체로 비워둔다

import { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import MovieList from "./components/MovieList";

function App() {
  const [movies, setMovies] = useState([]); //빈 배열

  //영화 데이터 가져오기 await를 써서 async를 써야함
  const getMovieRequest = async (searchValue) => {
    const url = `https://www.omdbapi.com/?apikey=6862e21d&s=${searchValue}`;
    const response = await fetch(url); //데이터를 받아올 때 까지 기다림 await
    const responseJson = await response.json(); //결과 문자열 -> json으로 변환
    //영화정보를 업데이트하기
    setMovies(responseJson.Search);
  };

  //실행해보기
  //getMovieRequest("amazing");

  //한 번만 실행
  useEffect(() => {
    getMovieRequest("amazing");
  }, []);

  return (
    <div className="container-fluid movie-app">
      <div className="row">
        <MovieList movies={movies} />
      </div>
    </div>
  );
}

export default App;

 

 

amazing에 대한 값들이 나온다 

 

 

 

 

---

검색창을 만들어본다. 

 

rafce

 

 

 

 

 

App.js

 

 

상단에 확인된다. 

 

 

 

 

 

 

 

화면 출력 확인하기

 

 

SearchBox로 검색어를 받아서 검색해야하니까 

 

searchValue useState추가 

 

SearchValue를 props로 줄거임 

 

setSearchValue는 함수임 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hook의 state 에 검색어가 올라가는지 테스트함

 

 

 

 

 

철자가 하나 바뀔 때마다 검색하도록 수정

 

app.js