React - 5 useEffect

그뭐니 nodejs로 지금 뭐 실행중이던데

 

index.js

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

 

 

 

App.js

import { useState, useEffect } from "react";

function App() {

const [counter, setValue] = useState(0);

const [keyword, setKeyword] = useState("");

const onClick = () => setValue((prev) => prev + 1);

const onChange = (event) => setKeyword(event.target.value);

//api를 한번만 호출하고 다시는 하지 않게 해주는 useEffect?

useEffect(() => {

console.log("CALL THE API....(i run only once.)");

}, []);

useEffect(() => {

if (keyword !== "" && keyword.length >5){

console.log("SEARCH FOR", keyword);

console.log("I run when 'keyword' changes");

}

}, [keyword]);

useEffect(() => {

console.log("I run when 'counter' changes");

}, [counter]);

return (

<div className="App">

<input

value={keyword}

onChange={onChange}

type="text"

placeholder="Search here..."

/>

<h1 className={styles.title}>{counter}</h1>

<button onClick={onClick}>click me</button>

</div>

);

}

export default App;