본문 바로가기
개발/react

react에서 useState와 useEffect 사용 예시!!

by 발명가H 2022. 9. 25.
import { useEffect, useState } from "react";
import Button from "./Button";

function App() {
  const [counter, setValue] = useState(0)
  const [keyword, setKeyword] = useState("")
  const onClick = () => setValue((prev) => prev+1)
  const onChange = (event) => setKeyword(event.target.value)
  console.log("I run all the time")
  useEffect(() => {
    console.log("Call the api..")
  }, [])
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5){
      console.log("search for", keyword)
    }
  }, [keyword])
  
  return (
    <div>
      <input value = {keyword} onChange = {onChange} type = "text" placeholder= "Search here..." />
      <h1>{counter}</h1>
      <button onClick = {onClick}>Click me</button>
    </div>
  );
}

export default App;​