[React] 영화 검색 페이지 만들기

김보나·2021년 10월 18일
3

React

목록 보기
5/15
post-thumbnail

API는 몇번 다뤄봐서 간단히 정리하고 넘어가려했는데,
토요일에 본 주차 테스트에서 말도 안되는 점수를 받아서 혼자서 복습을 했다.

오늘의 목표

  • 영화 진흥원의 Open API를 이용
  • 영화 제목을 검색하면 관련 영화가 출력되는 페이지
  • async - await 이용

시작하기 전에 ...

  1. 영화 진흥원 (http://www.kobis.or.kr/kobisopenapi/homepg/main/main.do) 에 가서 회원가입 후 로그인 한 뒤 키를 발급받는다.
  2. react-create-app 을 이용해서 프로젝트를 만들어주자
  3. 터미널을 열고 npm install axios 을 해준다.

구조부터 만들기

  • 본격 데이터를 불러오기 전, html과 css를 이용해서 간단히 구조부터 잡아주었다.
  • 검색하는 부분과 결과가 나오는 부분을 따로 컴포넌트로 빼서 작성해주었다.
  • js 코드
    import { BiListCheck, BiSearchAlt2 } from "react-icons/bi";
    function SerarchBar({ onClick, onChange }) {
      return (
        <>
          <div className="input-group">
            <input
              type="search"
              className="form-control rounded"
              placeholder="영화 이름 입력"
              onChange={onChange}
            />
            <button type="button" id="search_btn" onClick={onClick}>
              <BiSearchAlt2 className="search_icon"></BiSearchAlt2>
            </button>
          </div>
        </>
      );
    }
    1. 맨위의 import는 아이콘을 사용하기위해서 다운로드 받은 라이브러리이다.
      사용법은 (https://react-icons.github.io/react-icons/) 여기 참고
    2. input과 button의 함수는 props로 받아 넣어주었고, props의 이름을 각각 onClick과 onChange로 지정해주었다.
    3. input에 placeholder를 통해 어떤 검색창인지 설명을 추가했다.
    4. button태그 안에 아이콘을 넣어주었다.
  • css 코드
    .input-group {
      text-align: center;
      width: 100px;
      margin: 0 auto;
      display: flex;
    }
    
    .input-group #search_btn {
      background-color: transparent;
    }
    1. 검색창을 가운데 정렬해주었다.
    2. display를 flex로 바꿔 한줄에 두개가 나란히 오도록했다.
    3. 검색 버튼의 배경색을 투명으로 바꿔주었다.
      (별거 없는 디자인을 고민하고 고민하다가 시간이 오래걸렸다.... 디자인은 디자이너에게 .... )
  • 결과(진짜 왜 오래걸렸는지 알 수 없는 부분...)

API 불러오기

  1. url 작성

    const key = "발급받은 키";
    const url = `http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=${key}`;
    • url 주소에 오타가 없는지 확인 또 확인하자.
    • console.log(url); 을 통해 url을 출력해서 들어가보면 영화 목록 데이터가 쭉 뜬다.
    • 요청 url 사용하는법
      • 필수라고 써있는 key 값은 꼭 넣어주어야한다.
      • 그 뒤 다양한 요청 변수를 통해 url에 값을 넣어준다.
      • url과 파라미터의 구분은 ? 로 하고, 파라미터간 구분은 & 으로 한다.
      • 예시
        const url = http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=${key}&movieNm=${query};

1. 검색어 저장하기
- 뒤에 movieNm으로 한국어를 넣어주려면 UTF-8 변환을 해줘야한다.
- 리액트에서는 encoding을 encodeURIComponent(item) 을 이용해서 해준다고한다.
- 예시

        const query = encodeURIComponent("안녕");
        const url = http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=${key}&movieNm=${query};
      
        
  
        
  • 이렇게 해서 만들어진 url을 콘솔로그에 찍어서 그 주소로 들어가면 관련 json 데이터가 출력된다.

2. 영화 목록을 가져올 fetchMovie 함수 만들기
1. App컴포넌트 안, 최상단에 변수들을 선언해준다.

    ```
    const [movie, setMovie] = useState([]);
    const [item, setItem] = useState("");
    ```
    
    
    
    
  1. App 컴포넌트 안에서 async를 사용하는 fetchMovie함수를 만들어준다.
    - try-catch를 이용해서 에러처리를 해준다.
    - 검색어를 받아오기 전에, 데이터가 잘 불러와지는지 테스트를 먼저 해본다.
    - axios를 사용하기위해 최상단에 import axios from 'axios'; 를 해준다.
    - 코드
     ```jsx
           const fetchMovie = async () => {
               console.log("클릭");
               try {
           //1
                 const response = await axios.get(url);
                 console.log(response);
                 console.log(response.data.movieListResult.movieList);
           //2
                 const newMovieList = response.data.movieListResult.movieList;
           			console.log(newMovieList);
           //3
                 setMovie(newMovieList);
                 console.log(movie);
               } catch (e) {
                 console.log(e);
               }
             };
    1. response 변수에 `awiat axios.get(url)`을 통해 받아온 데이터를 넣어준다.
           콘솔로그로 response의 값을 확인한뒤, 우리가 필요한 값인 movieList에 접근해서 값이 잘 나오는지 확인한다.
     2. newMovieList에 영화 목록만 할당해준다.
           콘솔로그로 값이 잘 찍히는지 확인한다.
     3. 위에서 선언한 movie 배열에 값을 넣어준다.
           → 검색 결과마다 movie 배열의 값이 바뀌어야하기때문에 복사를 해서 넣어주지않았다.
    
           
           
    3. 받아온 데이터를 출력하기
    • result 함수를 선언해서 movie의 값을 <ol> 태그로 바꿔줬다.

    • map 을 사용할 수도 있을 것 같은데 하다가 안돼서,,, for문으로 선언했다. ㅠ

      • 코드
      function Result({ movie }) {
               
               //1
                 var lis = [];
                 for (var i = 0; i < movie.length; i++) {
                   var item = movie[i];
                   lis.push(
                     <ol key={item.movieCd}>
                       영화 제목 :{item.movieNm}
                       <br />
               //2
                       개봉일 : {item.openDt == "" ? "미정" : item.openDt}
                     </ol>
                   );
                 }
               //3
                 return (
                   <>
                     <div className="result">
                       <div id="result_text">{lis}</div>
                       <br />
                     </div>
                   </>
                 );
               }
               /////
               
               <Result movie={movie}></Result>
               ```
    1. 빈 배열 lis를 선언해주고 for문을 통해 lis 배열에 내가 원하는 값만 넣어주었다.
    2. item.openDt(개봉일)이 비어있다면 미정이라는 글씨는 출력하고 그렇지 않다면 개봉일을 출력했다.
    3. lis를 출력했다.

검색어를 url에 넣기

  • 이제 다했다.
  • 남은건 input 태그에 들어온 값을 url에 저장시켜주는것이다.
  • 이건 전에 포스팅에서도 설명을 했기 때문에 생략하겠다.
  • 코드
    const searchItem = event => {
        setItem(event.target.value);
        console.log(item);
      };
    
    ///
    
    <SerarchBar onClick={fetchMovie} onChange={searchItem}></SerarchBar>

최종 결과값

profile
우주최강 개발자가 될 때까지😈

0개의 댓글