Day 33, React (HTTP)

섹션 6까지 들었다.

다음주부터 프로젝트 예정이라 급 섹션15 (HTTP 요청보내기) 로 넘어갔다.

이거랑 섹션30 (리액트훅) 까지는 공부해야하는데!

 

 

 

 

 

 

 

---

 

 

 

 

isLoading을 useState로 변수로 만들었고

async와 await을 사용했다.

처음에 데이터를 가져오는 동안은 '로딩 중...' 이 뜨고

데이터 가져오면 뜨지 않게!

 

fetch 사용해서 API 데이터 가져왔고

error도 추가해서 404의 경우, 계속 로딩 중이 뜨는 것이 아니라 에러 메시지 표시하게 했다.

 

 

 

 

 

 

 

import React, { useState } from "react";

import MoviesList from "./components/MoviesList";

import "./App.css";

function App() {

  const [movies, setMovies] = useState([]); // 배열!

  const [isLoading, setIsLoading] = useState(false);

  const [error, setError] = useState(null);

  async function fetchMoviesHandler() {

    setIsLoading(true);

    setError(null);

    try {

      const response = await fetch("https://swapi.dev/api/films/");

      if (!response.ok) {

        throw new Error("Something went wrong!");

      }

      const data = await response.json();

      const transformedMovies = data.results.map((movieData) => {

        return {

          id: movieData.episode_id,

          title: movieData.title,

          openingText: movieData.opening_crawl,

          releaseDate: movieData.release_date,

        };

      });

      setMovies(transformedMovies);

    } catch (error) {

      setError(error.message);

    }

    setIsLoading(false);

  }

 

  let content = <p>Found no movies!</p>;

  if (movies.length > 0) {

    content = <MoviesList movies={movies} />;

  }

  if (error) {

    content = <p>{error}</p>;

  }

  if (isLoading) {

    content = <p>Loading...</p>;

  }

  return (

    <React.Fragment>

      <section>

        <button onClick={fetchMoviesHandler}>Fetch Movies</button>

      </section>

      <section>

        {content}

        {/* {!isLoading && movies.length > 0 && <MoviesList movies={movies} />}

        {!isLoading && movies.length === 0 && !error && <p>Found no movies!</p>}

        {!isLoading && error && <p>{error}</p>}

        {isLoading && <p>Loading...</p>} */}

      </section>

    </React.Fragment>

  );

}

export default App;

 

 

 

---

 

POST

 

 

import React, { useState, useEffect, useCallback } from "react";

import MoviesList from "./components/MoviesList";

import AddMovie from "./components/AddMovie";

import "./App.css";

function App() {

  const [movies, setMovies] = useState([]);

  const [isLoading, setIsLoading] = useState(false);

  const [error, setError] = useState(null);

  const fetchMoviesHandler = useCallback(async () => {

    setIsLoading(true);

    setError(null);

    try {

      // const response = await fetch('https://swapi.dev/api/films/');

      const response = await fetch(

        "https://udemy-3fe8b-default-rtdb.firebaseio.com/wow353.json"

      );

      if (!response.ok) {

        throw new Error("Something went wrong!");

      }

      const data = await response.json();

      const loadedMovies = [];

      for (const key in data) {

        loadedMovies.push({

          id: key,

          title: data[key].title,

          openingText: data[key].openingText,

          releaseDate: data[key].releaseDate,

        });

      }

      const transformedMovies = data.map((movieData) => {

        return {

          id: movieData.episode_id,

          title: movieData.title,

          openingText: movieData.opening_crawl,

          releaseDate: movieData.release_date,

        };

      });

      setMovies(transformedMovies);

    } catch (error) {

      setError(error.message);

    }

    setIsLoading(false);

  }, []);

  useEffect(() => {

    fetchMoviesHandler();

  }, [fetchMoviesHandler]);

  async function addMovieHandler(movie) {

    const response = await fetch(

      "https://udemy-3fe8b-default-rtdb.firebaseio.com/wow353.json",

      {

        method: "POST",

        body: JSON.stringify(movie), // 자바스크립트 형식을 JSON 형식으로

        headers: {

          "Content-Type": "application/json",

        },

      }

    );

    const data = await response.json();

    console.log(data);

  }

  let content = <p>Found no movies.</p>;

  if (movies.length > 0) {

    content = <MoviesList movies={movies} />;

  }

  if (error) {

    content = <p>{error}</p>;

  }

  if (isLoading) {

    content = <p>Loading...</p>;

  }

  return (

    <React.Fragment>

      <section>

        <AddMovie onAddMovie={addMovieHandler} />

      </section>

      <section>

        <button onClick={fetchMoviesHandler}>Fetch Movies</button>

      </section>

      <section>{content}</section>

    </React.Fragment>

  );

}

export default App;