영화 API 사용해보기

기존에 있던 todo 와 라우터를 사용해봤으면 이제 api를 사용해볼 차례이다.

 

api를 사용하려고 알아보던 와중에 영화진흥위원회 api를 사용해보기로 했다.

 

https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do

주소에서 api를 가져올 수 있다. 

 

일단 src/components/MovieRankAPI 를 만들었다.

빨간건 무시하자!

그리고 각각의 해당하는 아이템과 리스트를 만들었다.

 

import React from "react";
import styled from "styled-components";

... 

const MovieItem = ({ movie }) => {
  const { rank, rankOldAndNew, movieNm } = movie;
  // console.log(movie)
  return (
    <ItemBlock>
      <div className="rank">
        {rank}
        <span>위</span>
        <div className="new">{rankOldAndNew === "OLD" ? "" : rankOldAndNew}</div>
      </div>
      <div className="title">{movieNm}</div>
    </ItemBlock>
  );
};

export default MovieItem;

 

난 신규, 랭킹, 제목정도만 가져왔으며 더 제공해주는 것은 직접 확인 보면 될 것 같다.

 

import React, { useState, useEffect, useCallback, useRef } from "react";
import axios from "axios";
import MovieItem from "./MovieItem";
import styled from "styled-components";

...

const MovieList = () => {
  const [value, setvalue] = useState("");
  const [date, setDate] = useState("");
  const [movies, setMovie] = useState(null);
  const focus = useRef(null);

  const onChange = useCallback(e => {
    setvalue(e.target.value);
  }, []);

  const onSubmit = useCallback(
    e => {
      e.preventDefault();
      const num = parseInt(value);
      if (!value || !num || value.length !== 8) return;

      setDate(value);
      setvalue("");
      focus.current.focus();
    },
    [value]
  );

  useEffect(() => {
    const query = date || "20190101";
    axios
      .get(
        `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=개인키&targetDt=${query}`
      )
      .then(res => setMovie(res.data.boxOfficeResult.dailyBoxOfficeList))
      .catch(e => console.log(e));
  }, [date]);

  if (!movies) {
    return null;
  }

  // console.log(movies[0].rank)
  return (
    <ListBlock>
      <div>
        <div className="fdiv">영화순위</div>
        <form className="date" onSubmit={onSubmit}>
          <input
            className="input"
            value={value}
            onChange={onChange}
            ref={focus}
            placeholder=" 궁금한 날 예) 20190105 처럼 입력"
          />
          <button>검색</button>
        </form>
        {movies.map((movie, index) => (
          <MovieItem key={index} movie={movie} />
        ))}
      </div>
    </ListBlock>
  );
};

export default MovieList;

 

리스트 부분도 위와 같이 적으면 끝난다 

 

 

헷갈려서 애먹은 부분이 있었지만 덕분에 더 잘 알게 되었다.