Youtube 클론 코딩을 해본 나로써는 발급받은 API가 있었기 때문에, 그것을 그대로 가져와서 활용하였다. 발급받은 API를 통해 GET요청을 해주었다.
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
videos: [],
currentVideo: null,
isLoading: true
}
// 생략....
searchVideo(queryString) {
fetch('https://www.googleapis.com/youtube/v3/search?' + new URLSearchParams ({
part: 'snippet',
maxResults: 3,
key: process.env.REACT_APP_YOUTUBE_API_KEY,
type: 'video',
q: queryString
}))
.then(res => res.json())
.then(data => this.setState({
videos: data.items,
currentVideo: data.items[0],
isLoading: false
}
))
}
나는 이런식으로 API를 발급받아서 fetch를 이용해 AJAX 요청을 해주었다. React를 배우면서 axios를 더 많이 사용했기 때문에 axios를 사용해서 풀어보고 싶었지만… 테스트케이스가 허락해주지 않아서 결국 fetch를 사용했다 ..ㅠㅠㅠㅠ
axios는 axios.create이런식으로 만들어서 보낼 수도 있고, 파라미터 데이터를 만들어서 보낼 수 있는데 fetch는 어떻게 사용하는지 찾아보다가 new URLSearchParams 라는게 있다는 것을 알았다.
new URLSearchParams은 GET 요청 시 데이터를 전달할 때 사용한다. 기존에는 search 부분을 수정하는 함수를 직접 구현해야 했지만, 이제는 브라우저가 제공한다.
input의 현재 값을 가져오기 위해 그동안 ref를 사용했었는데 오늘은 state를 활용해보았다.
class Search extends React.Component {
constructor(props) {
super(props)
this.state = {
queryString: ''
}
}
// input의 값을 찾는다.
handleChange (event) {
this.setState({
queryString: event.target.value
})
}
//
handleClick () {
// 상태값을 handleButtonClick을 통하여 부모에게 전달
this.props.handleButtonClick(this.state.queryString)
}
render() {
return (
<form className="search-bar form-inline">
<input
value={this.state.queryString}
onChange={this.handleChange.bind(this)}
placeholder="동영상을 검색해 주세요!"
className="form-control"
type="submit"
/>
<button
onClick={this.handleClick.bind(this)}
className="btn hidden-sm-down"
>
검색
</button>
</form>
);
}
}
export default Search;
오늘 스프린트는 페어분도 상당히 잘하시는 분이여서 금방 끝났다. 다 작성하고 테스트 통과하는데 까지 1시간정도 걸린 것 같다. 코드스테이츠에는 다 똑같이 공부하러 왔지만 실력은 그 중에서도 천차만별이라고 생각한다. 잘하시는 사람은 정말 잘하셨고, 처음 배우시는 분들은 정말 어려워하셨다.
잘하는 사람이 많다고 기죽지말고, 결국 나에겐 아무상관이 없다. 나는 앞으로 다가오는 4주 프로젝트를 위해 내 실력을 갈고 닦을 생각만 하자!
👊 내일의 TIW(today I Will)
React Hook