[Youtube API] 검색어를 이용한 동영상 목록 보여주기(1)

저번 포스팅에 이어서 작성합니다.
[Youtube API] 인기 동영상 목록 보여주기(2) - 제목과 채널명 보여주기

Search 관련 링크

표시한 곳을 누르면 code를 사용할 수 있습니다.

이런 식으로 작성을 하여 EXCUTE를 누르시면 결과를 확인할 수 있고 SHOW CODE를 누르시면 코드를 확인하실 수 있습니다!
나온 코드를 이용해서 작성을 하시면 됩니다.

`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&key=${apiKey}`,

저는 이렇게 나온 걸 가지고 사용하겠습니다 ㅎㅎ

이 전 포스팅과 구조가 많이 바뀌었네요...
View에서 통신을 하면 좋지 않기 때문에 통신하는 부분은 youtube.js로 옮겼습니다.

youtube.js

const apiKey = process.env.REACT_APP_API_KEY;

class Youtube {
  constructor(key) {
    this.key = key;
    this.getRequestOptions = {
      method: 'GET',
      redirect: 'follow',
    };
  }

  async mostPopular() {
    try {
      const response = await fetch(
        `https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&type=video&key=${apiKey}`,
        this.getRequestOptions
      );
      const result = await response.json();
      return result.items;
    } catch (error) {
      return console.log('error', error);
    }
  }

  async search(query) {
    try {
      const response = await fetch(
        `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&key=${apiKey}`,
        this.getRequestOptions
      );
      const result = await response.json();
      return result.items.map((item) => ({ ...item, id: item.id.videoId }));
    } catch (error) {
      return console.log('error', error);
    }
  }
}
export default Youtube;

그런데 저번 포스팅에서 했던 인기 동영상과 return 문 쪽이 약간 다르죠?
왜냐하면 다르게 데이터가 넘어오더라고요.

인기 동영상 데이터에는 id가 바로 나왔는데

검색으로 찾을 때는 id가 오브젝트 형태입니다. 안에 videoId가 있어요.

result.items.map((item) => ({ ...item, id: item.id.videoId }));

그래서 기존 item 정보를 유지하고 아이디만 item.id.videoId로 덮어주었습니다.

App.js

function App({ youtube }) {
  const [videos, setVideos] = useState([]);

  const search = (query) => {
    youtube
      .search(query) //
      .then((videos) => setVideos(videos));
  };
  
  useEffect(() => {
    youtube
      .mostPopular() //
      .then((videos) => setVideos(videos));
  }, []);

  return (
    <div className={styles.app}>
      <SearchHeader onSearch={search} />
      <VideoList videos={videos} />
    </div>
  );
}

search_header.jsx

const SearchHeader = ({ onSearch }) => {
  const inputRef = useRef();
  const handleSearch = () => {
    const value = inputRef.current.value;
    onSearch(value);
  };
  const onClick = () => {
    handleSearch();
  };

  const onKeyPress = (event) => {
    if (event.key === 'Enter') {
      handleSearch();
    }
  };

  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img className={styles.img} src="/images/logo.png" alt="logo" />
        <h1 className={styles.title}>Youtube</h1>
      </div>

      <input
        ref={inputRef}
        className={styles.input}
        type="search"
        placeholder="Search"
        onKeyPress={onKeyPress}
      />
      <button className={styles.button} type="submit" onClick={onClick}>
        <img
          className={styles.buttonImg}
          src="/images/search.png"
          alt="search"
        />
      </button>
    </header>
  );
};

export default SearchHeader;

버튼을 클릭하거나 input에서 enter를 치면 작동이 되도록 하였습니다.