왜 url 파라미터와 item.picture는 객체안의 객체안의 데이터인데
url 파라미터는 단어만 입력해도 되고, item.picutre는 왜 item. index1,index2,index3[0].picture
answer
아래처럼 api 개발자가 url 파라미터로 특정 단어를 지정 후, 바로 접근할 수 있게 만들어 놨기 때문
Rapid api의 다양한 url내역
API의 파라미터 구성은 API를 설계하고 구현하는 개발자가 정의합니다. API 개발자는 특정한 데이터를 요청하고 전송하는 방법을 결정하기 위해 파라미터를 설정합니다. 이러한 파라미터는 API의 사용자가 필요한 데이터를 제공하거나 특정 작업을 수행할 수 있도록 하는 데 사용됩니다.
url은 말그대로 api 제작자가 지정한 놓은대로 검색 하고 결과를 가져오는 기능
구현과정
Rapid APi는 10/month 의 데이터 전송 기회 무료계정을 제공한다.
8번 만에 계속 혼자 데이터를 뜯어보면서 작성한 결과 성공했다.
간단하게 이미지와 숙박 위치만 출력하도록 했다.
처음에 check in/out 파라미터가 영상처럼 없길래 다른 걸로 불러왔더니.. 막상 check in/out 데이터가 있었다.
10번 중 8번의 사용
그래서 check in/out을 사용하려 했는데 막상 데이터 구조가 영상 코드 구조와 많이 달랐다.
그래서 스스로 데이터 구조를 뜯어보면서 데이터를 불러서 Item 컴포넌트에 check in/out 검색으로
나온 이미지와 도시 이름 결과를 map()으로 출력했다.
렌더링 결과
grid 추가 렌더링
데이터 구조(chekin ,out 데이터도 포함)
airbnb 컴포넌트
import React , { useRef , useState } from "react" ;
import Item from "./Item" ;
import "bootstrap/dist/css/bootstrap.css" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
function Airbnb () {
const [ items , setItems ] = useState ();
const ref = useRef ();
const ref2 = useRef ();
const ref3 = useRef ();
const API_KEY = "key 직접 받아와주세요" ;
const options = {
method : "GET" ,
headers : {
"X-RapidAPI-Key" : API_KEY ,
"X-RapidAPI-Host" : "airbnb19.p.rapidapi.com" ,
},
};
const fetchAirbnb = async ( e ) => {
e . preventDefault ();
console . log ( "city" , ref . current . value );
console . log ( "checkin" , ref2 . current . value );
console . log ( "checkout" , ref3 . current . value );
// console.log("totalRecords", ref2.current.value);
// console.log("currency", ref3.current.value);
// console.log("adults", ref4.current.value);
const city = ref . current . value ;
const checkin = ref2 . current . value ;
const checkout = ref3 . current . value ;
// const totalRecords = ref2.current.value;
// const currency = ref3.current.value;
// const adults = ref4.current.value;
try {
const response = await fetch ( url , options );
if ( ! response . ok ) {
throw new Error ( "Fail to fetch airbnb data" );
}
const result = await response . json ();
console . log ( result . data . list );
setItems ( result . data . list );
} catch ( error ) {
console . error ( error );
}
};
return (
<>
< form onSubmit = { fetchAirbnb } >
< input type = "text" placeholder = "영어로 도시 입력" ref = { ref } />
< p >
checkin
< input type = "date" ref = { ref2 } />
checkout
< input type = "date" ref = { ref3 } />
{ /* <br></br> 수용인원
<input type="number" ref={ref4} /> */ }
</ p >
< button > 검색 </ button >
</ form >
{ items && items . map (( item ) => < Item item = { item } /> ) }
</>
);
}
export default Airbnb ;
App.jsx
import Airbnb from "./Airbnb" ;
import "./App.css" ;
function App () {
return (
< div className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" >
< Airbnb />
</ div >
);
}
export default App ;
Item 컴포넌트
import React from "react" ;
function Item ({ item }) {
return (
< div >
< div className = "card" >
< img
src = { item . listing . contextualPictures [ 0 ]. picture } //이미지 정보
className = "card-img-top"
style = { { width : "200px" , maxHeight : "200px" } } //스타일 지정(이미지가 크면 안나올 수도 있음)
/>
< div className = "card-body" >
< h5 className = "card-title" > { item . listing . city } </ h5 > // 도시 이름
< p className = "card-text" >
Some quick example text to build on the card title and make up the
bulk of the card's content.
</ p >
< a href = "#" className = "btn btn-primary" >
Go somewhere
</ a >
</ div >
</ div >
</ div >
);
}
export default Item ;
느낀점
데이터를 이렇게 스스로 뜯어보고 리액트를 데이터 구조에 맞게수정하고 출력에 성공해본 것은 이번이 처음인듯 하다.
이를 통해 url과 컴포넌트 데이터 가져오는 것에 대한 차이를 이해할 수 있었다.
