2021_05_11

TIL - Lifting State Up, Side Effect

저번시간에는 videoList와 videoPlayer를 구현했다면, 이번시간에는 Search를 구현하고, fakeData가 아닌 fetch와 같은 AJAX 요청을 통해 videoList를 가져올 거다.

저번시간에 공부했던 다이어그램이다. Search 컴포넌트에서 AJAX 요청을 통해 검색어를 전송하면 videoListEntry 컴포넌트의 상태가 변화한다.

따라서 상태를 변화시키는 함수는 Search컴포넌트와 videoListEntry 컴포넌트의 공통 부모인 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라고 한다.

App에서 작성한 상태 변경 함수를 videoListEntry에서 실행시키기 위해 Lifting State Up 개념을 이용한다. props로 Nav 컴포넌트에 전달하고 또, Search 컴포넌트에게 전달하여 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에 대하여 공부하였다.
다음시간에는 React Hook에 대하여 공부한다
오늘은 여기까지.!!