useEffect

 

import "./App.css";
import React, { useEffect, useState } from "react";

// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함.
/*
  mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 )
  unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 )
  update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )

*/
function App() {
  const [count, setCount] = useState(0);

  // mount => []빈배열은 App()이 로딩될때 초기에 딱, 한번만! 호출됨.
  useEffect(() => console.log("hello"), []);

  // unmount => 두번째 인자가 없음.  useEffect에서 console.log('hello') 함수를 바로 리턴-
  // App()함수에서 unmount라고 인식함.
  useEffect(() => console.log("hello"));

  // update => [count]가 변할때 마다  console.log('hello')가 호출됨.
  useEffect(() => console.log("hello"), [count]);

  return (
    <div className="App">
      <span>{count}</span>
      <button onClick={() => setCount(count +1)}>+</button>
    </div>
  );
}

export default App;

 

 

 

 

update- 5에서 콘솔

import "./App.css";
import React, { useEffect, useState } from "react";

// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함.
/*
  mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 )
  unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 )
  update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )

*/
function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count === 5) {
      console.log('this is five');
    }
  }, [count]);

  return (
    <div className="App">
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

export default App;