meme generator React.useState 예제 코드

Meme.js 코드를살펴보면

import React from "react";
import memesData from "../memesData";

export default function Meme() {
  const [memeImage, setMemeImage] = React.useState("");

  function GetMemeImage() {
    const memesArray = memesData.data.memes;
    const randomNumber = Math.floor(Math.random() * memesArray.length);

    setMemeImage(memesArray[randomNumber].url);
  }

  return (
    <main>
      <div className="form">
        <input
          type="text"
          placeholder="Shut up"
          className="form--input"
        ></input>
        <input
          type="text "
          placeholder="Take my money"
          className="form--input"
        ></input>
        <button className="form--button" onClick={GetMemeImage}>
          Get a new meme image 🖼
        </button>
      </div>
      <img src={memeImage} className="meme--image" />
    </main>
  );
}

이렇게 memeImage에 대한 state설정해주고

 const [memeImage, setMemeImage] = React.useState("");

GetMemeImage()가 불러지면
setMemeImage에서 meme array중 하나의 url가 불러오도록 이렇게
설정해주고

 setMemeImage(memesArray[randomNumber].url);

여기서는 callback function안쓴 이유가
React.useState에 있는 empty string안에 있는걸 바꿔주는게 아니고
거기에 추가해주는거기 때문에 그냥 바로 url불러오는거임

버튼 밑에 이미지가 나올수 있도록

  <img src={memeImage} className="meme--image" />

이렇게 써준거임...

이걸 refacotring한게 밑에 있다.

import React from "react"
import memesData from "../memesData.js"

export default function Meme() {
    
    const [meme, setMeme] = React.useState({
        topText: "",
        bottomText: "",
        randomImage: "http://i.imgflip.com/1bij.jpg" 
    })
    const [allMemeImages, setAllMemeImages] = React.useState(memesData)
    
    
    function getMemeImage() {
        const memesArray = allMemeImages.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        const url = memesArray[randomNumber].url
        setMeme(prevMeme => ({
            ...prevMeme,
            randomImage: url
        }))
        
    }
    
    return (
        <main>
            <div className="form">
                <input 
                    type="text"
                    placeholder="Top text"
                    className="form--input"
                />
                <input 
                    type="text"
                    placeholder="Bottom text"
                    className="form--input"
                />
                <button 
                    className="form--button"
                    onClick={getMemeImage}
                >
                    Get a new meme image 🖼
                </button>
            </div>
            <img src={meme.randomImage} className="meme--image" />
        </main>
    )
}

State 작성하는 것까지는 혼자 잘했는데

function getMemeImage() {
        const memesArray = allMemeImages.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        const url = memesArray[randomNumber].url
        setMeme(prevMeme => ({
            ...prevMeme,
            randomImage: url
        }))

이 부분을 잘 작성못해서 강의 보고 따라침 ㅠㅠ
url를 따로 url variable로 넣어주고
object일때 배웠던 것처럼
setMeme에 function을 써주는데
이미 있는 애들 spread operator로 한번 쫙 펴서 써주고
그다음에 바꾸는 object element를 써준다.

randomImage: url