fetch로 백엔드 데이터 받아오기

Promise를 이용한 fetch 함수 호출

fetch('api 주소', {
	method: 'POST'
    })
})
  .then(res => res.json())
  .then(res => {
    console.log(res)
  });

Async / Await을 이용한 fetch 함수 호출

const fetchAuthorName = async () => {
  const postResponse = await fetch('api주소', method: 'POST')
  const post = await postResponse.json()
   return console.log(post)
}

현재 ClassComponent로 왓챠피디아 클론을 진행중인데, 더미데이터를 만들어서 fetch 함수로 불러와 화면에 뿌려주기 위해 사용했다.

movieLists;
componentDidMount() {
    fetch("http://localhost:3000/Data/Data.json")
      .then((response) => response.json())
      .then((result) => this.setState({
        movieList: result.allMovies
      }, () => this.movieLists = this.state.movieList));
  }

현재 state의 movieList에 fetch로 불러온 allMovies 객체를 저장한다.

그 후 콜백으로 movieLists라는 변수에 state에 담긴 movieList를 다시 저장했다.
이유는? 영화 장르를 선택하면 장르에 맞게 filter시켜서 다시 movieList에 담는데 state의 movieList는 이미 변해버려서 최초 값을 저장해 둘 곳이 필요했다.
이렇게 하지 않으면 filter를 계속 돌릴때마다 이미 filter되버린 값에서 다시 해버린다

그래서 전역에 movieList를 만들고 최초의 값을 저장시켰다.

위 예시에는 method가 명시되어 있지 않다. 명시하지 않은 GET 방식은 Default값이기 때문에 따로 써줄 필요가 없다.