React Axios YoutubeApi

Git Link: https://github.com/sunnysideup0w0v/reactPractice

Youtube Api 를 이용해 5개의 비디오 목록을 추출,
semantic ui를 이용해 앱의 ui를 변경시키는 작업 등을 진행했다.

props를 이용해 App.js에 있는 state를 VideoItem까지 전달 후, 다시 Videoitem에서 VideoDetail로 데이터를 올려주는 과정을 거쳤다.

// App.js
import React from "react";
import SearchBar from "./copmonents/SearchBar";
import youtube from "./apis/youtube";
import VideoList from "./copmonents/VideoList";
import VideoDetail from "./copmonents/VideoDetail";

class App extends React.Component {
  state = { videos: [], selectedVideo: null };
  componentDidMount() {
    this.onTermSubmit("lofi playlist");
  }
  onTermSubmit = async (term) => {
    const response = await youtube.get("/search", {
      params: {
        q: term,
      },
    });
    this.setState({
      videos: response.data.items,
      selectedVideo: response.data.items[0],
    });
  };
  onVideoSelect = (video) => {
    this.setState({ selectedVideo: video });
  };
  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
        <div className="ui grid">
          <div className="ui row">
            <div className="eleven wide column">
              <VideoDetail video={this.state.selectedVideo} />
            </div>
            <div className="five wide column">
              <VideoList
                videos={this.state.videos}
                onVideoSelect={this.onVideoSelect}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;


// VideoList.js
import React from "react";
import VideoItem from "./VideoItem";

const VideoList = ({ videos, onVideoSelect }) => {
  const renderedList = videos.map((video) => {
    return (
      <VideoItem key={video.etag} video={video} onVideoSelect={onVideoSelect} />
    );
  });
  return <div className="ui relaxed divided list">{renderedList}</div>;
};

export default VideoList;


// VideoItem.js
import React from "react";
import "./VideoItem.scss";

const VideoItem = ({ video, onVideoSelect }) => {
  return (
    <div className="item VideoItem" onClick={() => onVideoSelect(video)}>
      <img
        className="ui image"
        src={video.snippet.thumbnails.medium.url}
        alt="thumbnail"
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
};

export default VideoItem;

App.js에서 ComponentDidMount 사이클에서 onSearchTerm 을 이용해 검색을 하는 이유는,
시작하자마자 아무것도 없는 화면을 제외시키기 위함이다.
api의 baseURL은 src/apis 폴더에 youtube파일에서 axios.create을 사용했고, KEY는 제거했다. My Unique Key....*

props로 child component에서 father component의 state를 변경하는 방법을 더 자세하게 공부할 수 있었고, async await에 대해서도 더 많이 연습을 할 수 있었다.
async와 await를 사용하는 이유는 비동기 처리를 하기 위함이다.
async와 await을 사용하기 전에는 axios..then 이나 catch를 이용해 응답에 대한 비동기 처리를 진행했엇는데, 신기하기도 하고 더 자세하게 공부를 해야할 필요성을 느끼게 되었다.

강의 1회독 때에는 코드를 따라치기 바빴다면,
이번 2회독에서는 코드를 이해하며 먼저 작성해보고 오류를 해결, 혹은 해결되지 않을 경우 어떻게 수정해가야하는지 중점으로 강의를 이해하며 웹앱을 제작해나갔다.
props를 거쳐가며 data 등을 넘겨주는 과정이 번거롭다는 생각이 들었고, 이제서야 리덕스가 왜 필요한지 그 필요성을 느낄 수 있게 되었다.

이 다음으로 hooks를 먼저 학습하고 그 뒤 리덕스를 학습하는데,
훅스는 정말 기억이 하나도 나지 않아 너무 걱정이다 :)