fetch 함수로 api 받아오기

import React, { Component } from "react";
import "./DetailLeft.scss";

class DetailLeft extends Component {
constructor() {
super();
this.state = {
data: [],
};
}

api로 받아온 데이터들을 담아줄 배열 data를 state로 생성했다.

componentDidMount = () => {
fetch("http://localhost:3000/data/data.json")
.then((res) => res.json())
.then((res) => {
this.setState(
{
data: res.data,
},
);
});
};

패치함수에 아직 백앤드한테 데이터를 받지못해서 목데이터를 임의로 만들어서 사용했다
"http://localhost:3000/data/data.json"를 res인자로 받아서 그걸 json형식으로 바꾸고 그걸 다시 setstate를 해줬다
data에 res = api정보가 들어갔다.

render() {
const { data } = this.state;
return (

  <div className="DetailLeft">
      {data.map((item) => {
        return (
          <div>
            <img className="DetailImg" src={item.img} />
          </div>
        );
      })}
  </div>
);

}
}
export default DetailLeft;

위에서 받은 정보data를 map함수를 이용하여 나오게 만들수있다.