[React] useEffect()

• useEffect(function, deps)

function ; 수행하고자 하는 작업

deps : 배열 형태, 배열 안에는 검사하고자 하는 특정 값 , or 빈 배열

 

import Button from "./Button";
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);
  console.log('i run all the time');

  // 컴포넌트가 화면에 가장 처음 렌더링 될때, 한 번만 실행하고 싶을 때는 deps위치에 빈배열
  //배열 생략시 리렌더링 될 때마다 실행
  useEffect(() =>{
    console.log("i run only once...")
  }, []); 
  
  //컴포넌트 업데이트 될 때(특정 props나 state바뀔 때)
  useEffect(() => {
    if(keyword !== "" && keyword.length > 5)
    console.log("i run when keyword changes", keyword);
  },[keyword]);

  useEffect(() => {
    if(counter !== "" && keyword.length > 5)
    console.log("i run when counter changes", counter);
  },[counter]);

  useEffect(() => {
    if(counter !== "" && keyword.length > 5)
    console.log("i run when keyword & counter changes");
  },[keyword, counter]);
  return(
    <div>
      <input 
        value={keyword}
        onChange={onChange}
        type="text" 
        placeholder="Search here..."></input>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click me!</button>
    </div>
  )
}
export default App;

 

• cleanup function : 컴포넌트가 unmount 될 때(사라질 때)

import { useState, useEffect } from "react";

function Hello() {
  useEffect(function () {
    console.log("hi :)");
    return function () {
      console.log("bye :("); //useEffect에 대한 뒷정리, return 뒤에 나오는 함수
    };
  }, []);
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  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;