fetch API를 이용한 REST API 호출 - 검색기능만들기

 

이번에는 검색창에 원하는 정보를 입력하면 해당하는 정보를 불러오는 검색기능을 만들어 보고자합니다.

 

입력값 state에 인풋에 입력한 값을 저장해줍니다

 

<search_header.js>

query 함수를 호출하면 원하는 api를 불러오는데 

App.js

q=bts를 query로 바꿔주고 search로 우리의 param을 받아올수 있음

<search_header.js>

우리가 input에 입력한 값이 입력값에 저장이 되고 param 을 이용해서 onSeach로 App.js의 search를 실행해줌(query 함수 실행)

<요류해결>

 

동일한 id를 가지고 있는 비디오가 리턴이 되는 오류가 발생

id가 object 형식으로 받아짐 여기서 videoId를 받아오고 싶기때문에  

items 배열을 map함수를 써서 id 를 videoId로 덮어주는 새로운 배열을 만들어줌

 

<전체코드>

//App.js

function App() {
  const [videos, setVideos] = useState([]);
  const search = query => {
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&type=video&key=AIzaSyAzZLkdsdKDNayq4Txz0z5wE4jeFCH55N0%20`, requestOptions)
      .then(response => response.json())
      .then(result =>result.items.map(item => ({...item,id: item.id.videoId})))
      .then(items =>setVideos(items))
      .catch(error => console.log('error', error));
  }
    useEffect(()=>{
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    fetch("https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=AIzaSyAzZLkdsdKDNayq4Txz0z5wE4jeFCH55N0%20", requestOptions)
      .then(response => response.json())
      .then(result =>setVideos(result.items))
      .catch(error => console.log('error', error));
  },[])
  return (
    <Box>
    <SearchHeader onSearch={search}/>
    <VideoList videos={videos}/>
    </Box>
  );
}
export default App;

search_header.js

const SearchHeader = ({onSearch}) => {
    let [입력값,입력값변경]=useState("");
    
    const onSubmit =(e)=>{
      e.preventDefault();
      입력값변경("")
      onSearch(입력값)

  };
    return(
    <Header>   
       <LogoIMG src = "/images/logo.png" alt="logo"/>
        <Title>Youtube</Title>
        <form>
        <Input value={입력값} type="search" placeholder="search..." onChange={(e)=>{
          입력값변경(e.currentTarget.value)
        }} />
        <Button type="submit" onClick={(e)=>onSubmit(e)}>
        <ButtonIMG src ="/images/search.png" alt="search"/>
        </Button>
        </form>
    </Header>
    )
  }

export default SearchHeader;

 

 

<결과>