youtube api 사용하기 - 클라이언트(1)

App.js는 컴포넌트 관련 코드로 여기서 렌더링된 정보가 index.js에서 ReactDOM.render() 안에서 하나의 컴포넌트로 받아 index.html의 특정 id(기본값은 'root', 여기서는 'app'으로 하였다.)를 가진 태그에서 실행시킨다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';
import { YOUTUBE_API_KEY } from '../config/youtube';

//이렇게 따로 변수로 넘길수도 있다.
//const title = <App />;
console.log(App);
console.log(YOUTUBE_API_KEY);

ReactDOM.render(
  //<div>{title}</div>,
  <App/>,
  //index.html에 <app>이라는 태그를 만들어 id도 app으로 정했다.
  document.getElementById('app');
);

//App.js
//리엑트 렌더링 구조 :App.js -> index.js -> index.html
class App extends React.Component{
  constructor(props){
    super(props){
    
      this.state={
        videos: [],
        currentVideo: null,
        isSettingOpen: false,
        currentUser: {
          name: "김코딩"
        },
        darkMode:false
      };
    }
    
    //컴포넌트가 화면에 등장한 후(mount 후) 생성
    //처음 검색할 동영상, 리스트를 코드스테이츠로 한다.
    componentDidMount(){
      this.getYouTubeVideos("코드스테이츠")
    }
    
    //각종 click, change 관련 메소드
    //다른 컴포넌트의 props로 전달하여 App.class의 state를 변경한다.
    
    render(){
      return(
        <div className={this.staet.darkMode ? "main dark" : "main light"}>
          //this.state에서 검색값 클릭 버튼(onClick), 입력값 받기 메소드(onChange),
          //user, darkmode 상태 props로 전달
          <Nav
            
          />
          <div className="col-md-7">
          //this.state에서 currentVideo, darkMode 상태 props로 전달
          <VideoPlayer
            video={this.state.currentVideo}
            darkMode={this.state.darkMode}
          />
        </div>
        <div className="col-md-7">
          //this.state에서 videoList의 list를 클릭-video실행(onClick)
          //videos, currentUser, darkMode 전달
          <VideoList
            handleVideoListEntryTitleClick={this.handleVideoListEntryTitleClick.bind(
              this
            )}
            videos={this.state.videos}
            user={this.state.currentUser}
            darkMode={this.state.darkMode}
          />
        </div>
        //this.state에서 isSettingOpen, setting button 클릭(onClick) updaetSetting button 클릭(onClick) 상태 전달
        <Setting
          isOpen={this.state.isSettingOpen}
          handleClose={this.handleSettingButtonClick.bind(this)}
          handleUpdateSetting={this.handleUpdateSetting.bind(this)}
          user={this.state.currentUser}
        />
        </div>
      );
    }
  }