[React] Axios로 데이터 받아 출력하기

 

Axios 설치

npm install axios

 

axios를 사용하여 데이터 받아오기

const Home = () => {
    const [item,setItem] = useState([]);

   useEffect(()=>{
    axios.get('https://openmarket.weniv.co.kr/products/')
    .then((data)=>{console.log(data.data.results)
   
    })
        .catch(()=>{console.log('실패!')})
   })

useEffect를 사용하여 렌더링 할 때 axios로 상품 데이터를 받아옵니다.

 

axios에서 사용할수있는 요청은 4가지입니다.

• GET: 데이터 조회
• POST : 데이터 등록 및 전송
• PUT : 데이터 수정
• DELETE : 데이터 삭제

지금 해볼것은 데이터를 받아와서 출력하는것이니 GET을 사용합니다.

 

then은 요청에 대한 응답이 도착했으면 어떤 행동을 하도록 합니다. console을 통해서 데이터가 잘 도착하는지 확인합니다.

catch는 요청에 대한 응답이 도착하지 않는다면 어떤 행동을 하도록 합니다.

 

const Home = () => {
    const [item,setItem] = useState([]);

   useEffect(()=>{
    axios.get('https://openmarket.weniv.co.kr/products/')
    .then((data)=>{setItem(data.data.results)
   
    })
        .catch(()=>{console.log('실패!')})
   })

받아온 데이터를 setItem()함수를 통해 데이터를 state에 저장합니다.

 

    <div>
    {item.map(item=>{
            return(<div key={item.id}>
                {item.price}</div>)
        })}
    </div>

item에 저장한 데이터를 map함수를 통해 전체 상품데이터를 가져옵니다.

상품 데이터중 가격을 출력하고싶으면 {item.price}, 상품이름이 궁금하다면 {item.product_name}을 입력합니다.

(받아온 데이터마다 .~~~ 명칭은 달라짐)

각각의 객체를 식별할수 있도록 key값을 고유한 item의 id로 설정합니다.