useEffect

import Button from './Button';
import styles from './App.module.css';
import { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onChange = (e) => setKeyword(e.target.value); 
  const onClick = () => setCount(count + 1);

//useEffect 상황별 사용법!!
  
//처음 렌더링시만 실행됨.
  useEffect(()=>{
    console.log("I run only once.");
  }, []);

//keyword state가 변동할때 && input의 value가 공백이 아니거나 길이가 5초과일때 실행됨. 
  useEffect(()=>{
    if(keyword !== "" && keyword.length > 5) {
      console.log("I run when 'keyword' changes.");
    }
  }, [keyword]);

//count state가 변동할때 실행됨  
  useEffect(()=>{
    console.log("I run when 'count' changes.");
  }, [count]);

//keyword, count state가 변동할때 실행됨  
useEffect(()=>{
  console.log("I run when keyword & count changes.");
}, [keyword, count]);


  return (
    <div>
      <input 
        value={keyword}
        type="text" 
        placeholder="Search here..." 
        onChange={onChange}
      />
      <h1 className={styles.title}>Hello React!!!</h1>
      <p>Count : { count }</p>
      <button onClick={ onClick }>Click me!</button>
    </div>
  );
}

export default App;