[React]검색어 콜백

프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

라고 위키백과에 써져있다.

머 여튼

영상 리스트를 클릭하면 그 영상이 보이도록 하고 싶다.

그래서 그와 관련된 함수를 만들었음

class App extends Component {

constructor(props){

super(props)

this.state= {

videos : [] ,

selectedVideo : null

};

YoutubeSearch({

key : API_KEY,

term : "크리스마스"

},

videos => {

this.setState({

videos: videos,

selectedVideo : videos[0]

});

}

);

}

_onVideoSelect = selectedVideo => {

this.setState({

selectedVideo

})

}

render(){

return (

<div className="main">

<SearchBar />

<VideoDetail videos={this.state.selectedVideo} />

<VideoList

onVideoSelect = {this._onVideoSelect}

videos={this.state.videos} />

</div>

);

}

}

이 때,

VideoDetail에 state를 selectedVideo로 바꾸고

초기값을 videos[0]로 바꾸었다.

이후에 _onVideoSelect라는 함수를 만들었고

이는 파라미터를 받아 state를 바꿀 것이다.

이 때 파라미터는 선택되어진 영상데이터여야 겠지?

고로 일단 Videoitems에 props로 넘기고

const VideoList = (props) => {

const VideoItems = props.videos.map((video) => {

return <VideoListItem

onVideoClick={props.onVideoSelect}

여기서 다시 우리가 클릭할 li태그가 있는 VideoListItem으로 넘긴다.

return (

<li className = "list-group-item" onClick={() => onVideoClick(video)}>

그리고 이 li태그에

onClick이벤트 발생시에 _onVideoSelect가 실행되어 state를 바꾼다.

그럼

input태그에 value값에 입력에 따라 비디오 결과가 나오게 해보자.

비디오 검색어는 term에 의해서 결정되고 value가 바뀔 때 마다 YoutubeSearch에 있는 term값이 바뀌어야 한다.

_VideoSearch = term => {

YoutubeSearch({

key : API_KEY,

term

},

videos => {

this.setState({

videos,

selectedVideo : videos[0]

});

});

}

이는 VideoSearch라는 함수를 만들어서 onChange가 실행될 때 마다 term(이벤트의 value)를 받아 YoutubeSearch에 term값을 바꾸려고 한다.

<SearchBar VideoSearch={this._VideoSearch}/>

SearchBar에 새로운 속성을 추가했고

 term을 받아서 VideoSearch의 term을 전달할 것이다.

onInputChange = term => {

this.setState({ term });

this.props.VideoSearch(term);

}

SearchBar에 추가한 함수이다.

onChange를 통해 term값이 바뀔 때 두가지 기능을 한다.

첫번째로는

 term값 자체를 바꾸는 것

이것은 value값을 바꾸기 위해(입력이 제대로 되기 위해 value = this.state.term이기 떄문 )필요하고

두번째로는

props값이 VideoSearch를 통해서 검색 결과에 따라 YoutubeSearch를 통해 검색된 비디오를 재렌더링 하기 위함

<input

value = {this.state.term}

onChange={event => this.onInputChange(event.target.value)} />

그리고 이들은 input태그에 다음과 같이 쓰임