meme project에 api넣기

저번에 했던 meme project에 useEffect을 이용해
api넣는걸 연습해봤다..

import React from "react";

export default function Meme() {
  const [meme, setMeme] = React.useState({
    topText: "",
    bottomText: "",
    randomImage: "http://i.imgflip.com/1bij.jpg",
  });

  const [allMemes, SetAllMemes] = React.useState([]);

  React.useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
      .then((res) => res.json())
      .then((data) => SetAllMemes(data.data.memes));
  }, []);

  function GetMemeImage() {
    const randomNumber = Math.floor(Math.random() * allMemes.length);
    const url = allMemes[randomNumber].url;

    setMeme((prevMeme) => ({
      ...prevMeme,
      randomImage: url,
    }));
  }

  function handleChange(event) {
    const { name, value } = event.target;
    setMeme((prevState) => {
      return {
        ...prevState,
        [name]: value,
      };
    });
  }

  return (
    <main>
      <div className="form">
        <input
          type="text"
          placeholder="Top text"
          className="form--input"
          name="topText"
          value={meme.topText}
          onChange={handleChange}
        ></input>
        <input
          type="Bottom text "
          placeholder="Take my money"
          className="form--input"
          name="bottomText"
          value={meme.bottomText}
          onChange={handleChange}
        ></input>
        <button className="form--button" onClick={GetMemeImage}>
          Get a new meme image 🖼
        </button>
      </div>
      <div className="meme">
        <img src={meme.randomImage} className="meme--image" />
        <h2 className="meme--text top">{meme.topText}</h2>
        <h2 className="meme--text bottom">{meme.bottomText}</h2>
      </div>
    </main>
  );
}

예전에는 그냥 직접 object만들어서 거기서 불러왔는데
이번에는 api주소로 fetch해서 가져온게 다른점이다.

  React.useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
      .then((res) => res.json())
      .then((data) => SetAllMemes(data.data.memes));
  }, []);

이 부분 혼자 구현할때 잘 했는데 틀렸던게 dependencies array를 안써줬음 ㅠㅠ

아 그리고 이거 작성한 뒤에 버튼눌러도 사진이 안바뀌는 현상이
일어났는데

  function GetMemeImage() {
    const randomNumber = Math.floor(Math.random() * allMemes.length);
    const url = allMemes[randomNumber].url;

allMemes로 바꿔줬더니 작동됨...
원래는 object로 const memesArray = allMemes.data.memes
이런식으로 따로 array에 담아줬는데 이제 allMemes자체가
array이므로 이렇게 따로 담아주지 않아도 됨.
아 솔직히 이 부분 잘 이해 안가서 나중에 다시 강의 들어봐야겠음