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;
'개발 > react' 카테고리의 다른 글
react에서 to-do-list 만들기는 바닐라 js에 비해 너무 쉬움!! (0) | 2022.09.26 |
---|---|
react array에서 [a, ...b]의 사용!! (0) | 2022.09.26 |
react의 useEffect는 딱 한번만 실행되며 dependency에서 변화되는 것을 지켜봄!! (0) | 2022.09.25 |
create-react-app (0) | 2022.09.24 |
react의 props는 함수형 컴포넌트에 argument를 전달함!! (0) | 2022.09.24 |