Axios로 json 데이터 받아오기

Axios란?

Node Js를 위한 HTTP 비동기 통신 라이브러리.

Axios 사용법

npm install axios // 설치
import axios from "axios" //선언

	export default function SlickSlider({products,setproducts})
{
    useEffect(()=>{
        axios.get("/data/products.json").then((data)=>{
            setproducts(data.data.products);
        });
    },[setproducts]); // axios로 products.json에 정보를 요청해 받은 데이터로 setproducts에 정보를 저장함.
     

axios.get 사용하여 해당 url에 정보를 요청.

then을 사용하여 data가 도착하면 setproducts에 data를 저장함.

전달받은 데이터로 Slider 만들기

	 <Slider {...settings} >
        {products.map((product,index) =>(
            <Link to ={`/product/${product.id}`}>
            <div key={index}>
                <img className={styled.img} src={product.image} alt={`key`} />
            </div>
            </Link>
        ))}
        </Slider>

저장된 products를 map함수를 사용하여 Slider를 만든 코드이다.