fetch api localStorage.setItem, getItem 질문드립니다..

[강성구]

영화 관련 앱을 만들어보고 있었는데 아래의 과정을 하던중 너무 꽉막혀서 질의 드립니다.
1번.    일단 처음 웹을 띄웠을 때, localStorage에 watched : [] 이렇게 빈화면으로 넣을 것이고,
2번.    input 창에 harry potter을 친다면 해당 값들을 localStorage에 넣으려고 합니다.
3번.    그 후 새로고침 했을때 그 harry potter를 다시 가져오게 하려고 합니다.

현재 코드에선 1번만 적용이 됐고 2번스탭으로 넘어가려는데 혹시 어떤부분을 좀 디버깅해 나가야할지 조언좀 구합니다...!

useEffect()를 2번 쓰고 안에 각각 getItem, setItem을 적절히 해주면 될텐데,, 다른 변수들이 있는건지 너무 진전이 안되는 상태입니다. 

import React, { useEffect, useState } from "react";
import Movie from "./components/Movie";
import "./App.css";
const FEATURED_API =
  "https://api.themoviedb.org/3/discover/movie?sory_by=popularity.desc&api_key=31e8f214a4d938e0dd77c786d722a638&page=1";

const SEARCH_API =
  "https://api.themoviedb.org/3/search/movie?api_key=31e8f214a4d938e0dd77c786d722a638&query=";

function App() {
  const [movies, setMovies] = useState(
    localStorage.getItem("watched")
      ? JSON.parse(localStorage.getItem("watched"))
      : []
  );
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(false);
  const handleOnchange = (e) => {
    setSearchTerm(e.target.value);
  };

  const handleOnsubmit = (e) => {
    e.preventDefault();
    getMovies(SEARCH_API + searchTerm);
    setSearchTerm("");
  };

  useEffect(() => {
    console.log("딱 한번 실행!!!");

    getMovies(FEATURED_API);
  }, []);

  const getMovies = (API) => {
    const fetchMovie = async () => {
      setLoading(true);
      const moviesResp = await fetch(API);
      const movieR = await moviesResp.json();
      setLoading(false);
      setMovies(movieR.results);
      localStorage.setItem("watched", JSON.stringify(movies));
    };
    fetchMovie();
  };

  useEffect(() => {
    console.log("빈배열 없음 >> 여러번 시행!!!");
  }, [movies]);

  return (
    <div>
      <header>
        <form onSubmit={handleOnsubmit}>
          <input
            className="search"
            type="text"
            placeholder="search.."
            onChange={handleOnchange}
            value={searchTerm}
          />
          <button>Search</button>
        </form>
      </header>
      <div className="movie_container">
        <div>
          {loading ? (
            <div style={{ color: "yellow", fontSize: "50px" }}>loading...</div>
          ) : (
            ""
          )}
        </div>
        {movies?.map((movie) => (
          <Movie
            key={movie.id}
            data={movie}
            title={movie.title}
            poster_path={movie.poster_path}
            vote_average={movie.vote_average}
            overview={movie.overview}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

[codingapple]

 localStorage.setItem("watched", JSON.stringify(movieR.results));

이래봅시다 state변경함수는 항상 늦게 처리됩니다 

loading 이라는 state는 state말고 일반변수로 만드는게 나을듯요 

[글쓴이]

글