14. HTTP 요청보내기: GET 요청 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

GET 요청 보내기

axios와 fetch 중 이 강의에서는 fetch를 사용한다.

fetch는 기본적으로 get 메서드를 사용하기 때문에 

method를 따로 get으로 사용하지 않아도 get으로 요청이된다. 

function App() {
  const [moveis, setMovies] = useState([]);

  //Fetch API, fetch가 프로미스 객체를 반환해서 then 사용, json이 프로미스 객체 반환하여 then 사용
  function fetchMoviesHandler() {
    fetch("https://swapi.dev/api/films/")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id, // episode_id 를 id로 바꿈
            title: movieData.title, // title은 안바꿈
            openingText: movieData.opening_crawl, // opening_crawl 를 openingText 바꿈
            releaseDate: movieData.release_date, // release_date 를 releaseDate 바꿈
          };
        });
        setMovies(transformedMovies);
      });
  }

가독성을 위해 get method를 주고싶으면, fetch의 두번째 인자로 메서드에 get을 주면된다.

function App() {
  const [moveis, setMovies] = useState([]);

  function fetchMoviesHandler() {
    fetch("https://swapi.dev/api/films/", {
    	method: 'GET', // GET 메서드
    })
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id, 
            title: movieData.title, 
            openingText: movieData.opening_crawl, 
            releaseDate: movieData.release_date,
          };
        });
        setMovies(transformedMovies);
      });
  }