2021_05_11

TIL - Lifting State Up, Side Effect

前回のレッスンでvideo Listとvideo Playerが実現した場合、このレッスンでは検索を実施し、fakeDataではなくfetchなどのAJAXリクエストでvideo Listを取得します.

これは前回勉強したグラフです.検索コンポーネントがAJAX要求でクエリーを送信すると、Video ListEntryコンポーネントの状態が変化します.
したがって、状態を変更する関数は、SearchコンポーネントとVideo ListEntryコンポーネントの共通の親Appコンポーネントによって管理される.

searchVideo(queryString) { //상태 변경 함수를 App 컴포넌트에 위치시킨다.
//YouTube Data API를 발급하여 실제 데이터를 가져온다. queryString은 검색창에 입력한 검색어다.
    let url = `https://www.googleapis.com/youtube/v3/search?key=${key}&part=snippet&q=${queryString}` 
    this.setState({
      isLoading: true,
    })
    fetch(url) //fetch를 이용하여 AJAX 요청을 한다.
      .then(res => res.json())
      .then(res => {
        this.setState({
          videos: res.items, //가져온 비디오 목록을 state로 저장한다.
          isLoading: false,
        })
    }, 2000)
  }

Fetchを使用してAJAXリクエストを発行するように、関数内では発生しない演算ですが、関数に影響を与えるのはsideEffectです.
Lifting State Upコンセプトを使用して、Appによって作成された状態変更関数をVideo ListEntryで実行します.PropsでNav構成部品に渡し、Search構成部品に渡します.これにより、Search構成部品は検索ボタンをクリックしたときにイベントを接続できます.
また、検索コンポーネントがonClickイベントに接続されている場合は、入力した検索語を伝達パラメータとして検索ウィンドウに送信します.したがって,検索ウィンドウに検索語を入力するたびにstateを保存する.

 changeInput(event) { //event객체가 전달된다.
    this.setState({ //상태를 저장한다.
      queryString: event.target.value // event객체의 값을 queryString이라는 키의 값으로 저장한다.
    })
  }

<div className="search-bar form-inline">
  <input className="form-control" type="text" onChange={this.changeInput}/> //검색어를 입력할 때마다 changeInput 함수를 연결한다.
  <button className="btn hidden-sm-down" onClick={() => {this.props.handleButtonClick(this.state.queryString)}}> //버튼을 클릭했을 때 현재 상태와 함께 props로 전달받은 함수를 연결한다.
    검색
  </button>
</div>

この授業ではLifting State UP、AJAXリクエスト、Side Effectを学びました.
次の授業でRECT HOOKについて勉強します.
今日はここまで!!