[React] #6. useEffect

//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

useEffect(실행하려는 코드, 지켜볼 항목 dependency);
지켜보는 항목이 존재하면 그 항목의 state가 변화할때만 실행된다.

import styles from "./App.module.css"
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);
 
  // 빈 array [] - > 지켜볼게 없어서 한번만 실행됨
  useEffect(() => {
    console.log("I run only once.");
  }, []);
  
  // keyword가 변화할 때만 실행되게 하기 useEffect 사용 
  useEffect(() => {
    if(keyword !== "" && keyword.length > 5){ // keyword 5글자 이상일때 실행
      console.log("I run when 'keyword' changes.");
    }
  }, [keyword]);
  // counter가 변화할 때만 실행되게 하기
  useEffect(() => {
      console.log("I run when 'counter' changes.");
  }, [counter]);
  
  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]);

  // state가 변화할 때 모든 component는 다시 실행되고
  // 모든 code가 다시 실행됨.
  return (
    <div>
      <input 
        onChange={onChange} 
        value={keyword}
        type="text"
        placeholder="Search here.."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

//App.js 2

import { useState, useEffect } from 'react';

function Hello() {
  useEffect (()=> {
    console.log("Im here");
  }, [])
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing ((prev)=> !prev);
  return (
    <div>
      {showing? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide": "Show"}</button>  
    </div>
  );
}

export default App;