useState란?

useState는 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해주는 Hook 입니다.

App.js

import "./styles.css";
import Header from "./components/Header";
import Meme from "./components/Meme";

export default function App() {
  return (
    <div className="App">
      <Header />
      <Meme />
    </div>
  );
}

Header.js

import Troll from "../../public/TrollFace.png";
export default function Header() {
  return (
    <div>
      <header className="header">
        <img src={Troll} className="header--image"></img>
        <h2 className="header--title">Meme generator</h2>
        <h4 className="header--project">React Course - Project 3</h4>
      </header>
    </div>
  );
}

Meme.js

import memesData from "../memesData";
import React from "react";
export default function Meme() {
  let [url, setUrl] = React.useState();
  const memesList = memesData.data.memes.map((meme) => {
    return meme;
  });
  function resetImg() {
    setUrl(memesList[Math.floor(Math.random() * memesList.length)].url);
  }
  return (
    <main>
      <div className="form">
        <input type="text" className="form--input" placeholder="Top Text" />
        <input type="text" className="form--input" placeholder="Bottom Text" />
        <button className="form--button" onClick={resetImg}>
          Get a new meme image 🖼️
        </button>
        <img src={url}></img>
      </div>
    </main>
  );
}

간단한 새로운 이미지를 뽑아주는 Meme.js 파일이다
memesData.js에서 데이터를 가져와서 map함수로 쪼갠 후에 useState안에
setUrl을 이용해서 랜덤한 url을 넣고 그 url을 밑에서 img태그가 출력한다.

useState의 가변성

useState는 렌더링을 새로 해주지 않아도 값을 바꾸면 자동으로 렌더링된다.

배열의 첫번째 원소는 상태 값이고, 두번째 원소는 상태를 설정하는 함수입니다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 됩니다.

[Javascript] onClick

위 코드에서 onClick을 이용해서 resetImg함수를 실행시켰다.
이 이벤트는 javascript에 있는 이벤트 중 하나이다.
onClick 안에 화살표 함수와 같이 정의를 할 수도 있고 정의되어있는 함수를 실행시킬 수 있다.