0420: 검색한 결과 화면에 그리기

이제 해야 할 일은, 검색한 리스트 나열하기

1. SearchList 컴포넌트에 props 넘겨주기

res.data.items를 movies라는 props로 넘겨주면, 배열을 넘겨주는 것.
배열 안에 객체들이 있음..
[{ title: '어쩌구', actor: '저쩌구' ... }, { ,,, } ... ]

지금 타입스크립트에 대한 공부가 부족해서 진도를 못 나가고 있다..
자스로 우선 완성해야 하나 싶어진다.
일단은 모두 any로 해놓고 진도나가고있다.. 타스알못

import axios from 'axios';
import React, { useState } from 'react';
import { REACT_APP_CLIENT_ID, REACT_APP_CLIENT_SECRET } from '../../config';
import SearchList from '../SearchList';

function SearchBar() {
  const [movies, setMovies] = useState<object[] | null>([]);
  const [word, setWord] = useState('');
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setWord(e.target.value);
  };

  const onSearch = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    axios
      .get(`/v1/search/movie.json?query=${word}`, {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-Naver-Client-Id': REACT_APP_CLIENT_ID,
          'X-Naver-Client-Secret': REACT_APP_CLIENT_SECRET,
        },
      })
      .then((res) => {
        setMovies(res.data.items);
      })
      .catch((error) => console.error(error));
  };

  return (
    <>
      <form onSubmit={onSearch}>
        <input value={word} onChange={onChange} placeholder="영화 제목을 검색하세요!" />
      </form>
      <SearchList movies={movies} />
    </>
  );
}

export default SearchBar;

import React from 'react';

function SearchList({ movies }: any) {
  return (
    <ul>
      {movies.map((movie: any, i: number): any => (
        <li key={i}>
          <img src={movie.image} />
          <p dangerouslySetInnerHTML={{ __html: `${movie.title}` }} />
          <span>감독 : {movie.director}</span>
          <span>출연 : {movie.actor}</span>
        </li>
      ))}
    </ul>
  );
}

export default SearchList;

일단 이렇게...

여기서 영화 정보 조금씩 더 추가하고,, 스타일은 일단 나중에

---

 

1. loadmore 10개씩 더 불러오기

일단 네이버 가이드에서 검색할 때 display=10을 기본값으로 주고 있고, 최대 100개까지 볼 수 있다고 한다.
loadmore을 해서 10개씩 끊어서 보는 방법은 없을까?
노드버드에서 더미데이터를 인피니트스크롤링하던 방식을 사용해야겠다.
상태관리 스토어가 없어도 가능할까?

1.1 검색 결과 갯수
그러면 우선 지금 검색결과물을 담는 배열 movies의 갯수를 파악해야한다.
그래서 00건의 검색결과 같은 멘트를 넣으려고 
movies.length 를 입력했더니 알아서 옵셔널체이닝 ? 가 붙었다.
movies가 '있을 때' length를 불러와야하니까!! 
타입스크립트가 정말 편하구나.
그래서 아래와 같이 일단 구현했다.
기본값이 null이고 배열이니까, [] 즉 길이가 0임
0이 아닐 때, movies가 있다면 그 배열의 길이를 가져오기.

  return (
    <>
      <form onSubmit={onSearch}>
        <input value={word} onChange={onChange} placeholder="영화 제목을 검색하세요!" />
      </form>
      {movies?.length !== 0 && <h4> {movies?.length} 건의 검색결과</h4>}
      <SearchList movies={movies} />
      <button>더 보기</button>
    </>

 

1.2 더보기 버튼은 10건 이상일 때만
axios로 데이터 요청할 때 display=100을 추가하고,,
배열의 길이가 10을 넘는다면, 10개씩만 끊어서 보여주려면,, 어떻게 해야 할까
또한, 10개가 넘을 때만 더보기가 보여야 함.
그러면 더보기를 SearchList에서 구현해야겠다.

// SearchList/index.tsx
    ...
      {movies?.length > 10 && <button>더보기</button>}

배열의 길이가 10 이상일 때만 더보기 버튼이 보이게.

현재까지 구현한 것

 

1.3 요청 받은 데이터를 10개씩 화면에 뿌리려면?

화면에 10개씩 뿌리려면 어떻게 하지? 상태관리?
예를 들어 100개의 영화가 있으면,
배열의 앞 10개만 화면에 그리고, 더보기를 클릭했을 때 11~20번을 불러와야하는데.

그러면, 노드버드에서 했던 방식은,
mainPosts = [] 빈배열을 초깃값으로 만들어놓음. 이게 초기화면임. 즉, 빈 화면
검색된 결과를 화면에 그릴 때 mainPosts 배열에 10개씩 추가하는 방식으로!
그러면 상태관리를 시작해야겠는데

차근차근..