#6.2 Deps

 

useEffect(()=>{
      console.log("SEARCH FOR", keyword);
}, [keyword] );

 

keyword의 부분이 keyword에 onChange할 때 실행하겠다는 의미가 된다.

 

1. useEffect() 한 번만 실행하는 경우

  useEffect(() => {
    console.log('only once');
  }, []);

 

2. useEffect() 특정 요소에 변화가 있을 때만 실행

  useEffect(() => {
    console.log('counter has changed');
  }, [counter]);

 

3. useEffect() 두 가지 요소에서 변화가 있을 때 

  useEffect(() => {
    console.log('counter or keyword has changed');
  }, [counter, keyword]);

 

 

---

 

전체 코드

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

function App() {
  const [counter, setValue] = useState(1);
  const [keyword, setKeyword] = useState("");

  function onClick() {
    setValue((prev) => prev + 1);
  }
  // console.log("I run all the time");

  const onChange = (event) => {
    setKeyword(event.target.value);
  }
  // const iRunOnlyOnce = () => {
  //   console.log("I run only once");
  // }
  useEffect(() => { console.log("I run only once") }, []);
  useEffect(() => {
    console.log('keyword has changed');
    // if (keyword !== "" && keyword.length > 5) {}
  }, [keyword]);

  useEffect(() => {
    console.log('counter has changed');
  }, [counter]);

  useEffect(() => {
    console.log('counter or keyword has changed');
  }, [counter, keyword]);


  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here ... " />
      <h1 className={styles.title}>{counter}</h1>
      <Button onClick={onClick} txt="This is a button" bgc='red' />
    </div>
  );
}

export default App;