노마드스터디 10주 챌린지에 참여했다. 주마다 학습한 부분을 간단히 기록하기 위해서 만든 시리즈!
처음부터 정리해서 쓰려다보니 시작을 미루게 되어서 일단 작성해보자 !

Cleanup function

• useEffect로 컴포넌트가 사라질 때 실행시킬 수 있는 함수

function Hello() {
  useEffect(() => {
    console.log("create :)");
    return () => console.log("destroyed :(");
  }, []);
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);

  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

Cleanup function 에 해당하는 부분은 useEffect 안에서 return하는 곳!
위의 코드에서는 버튼을 눌러서 컴포넌트가 사라질 때 실행되게 하는 함수이다.

function Hello() {
  function byFn() {
    console.log("Bye");
  }
  function hiFn() {
    console.log("created");
    return byFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

위와 같음.

then 과 async-await

• then 대신에 async-await를 사용하기
• getMovies 함수를 만들고 useEffect 함수에서 실행시킨다.

useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
      .then((res) => res.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

  const getMoives = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year");
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };

  useEffect(() => {
    getMoives();
  }, []);