리액트6 useEffect() / cleanUp function

import { useEffect, useState } 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') 
  useEffect( ()=> {
    console.log('i run only once.')
  }, []) //한번만 실행
  useEffect(()=>{
  //  if(keyword !== "" && keyword.length >= 5){
      console.log('i run when keyword changes.');
   // }
  },[keyword]) //keyword가 변화할때마다 실행됨.
 useEffect(() =>{
    console.log('i run when counter changes.')
 },[counter]) //counter가 변화할때마다 실행됨
  useEffect(()=>{
    console.log('i run when keyword or counter changes')
  }, [keyword,counter]) //keyword 또는 counter가 변화할때마다 실행됨
  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here..." />
      <h1>{counter}</h1>
      <button onClick={onClick}>click</button>
    </div>
  );
}

export default App;

 

useEffect()함수는

React component가 렌더링 될 때 마다 특정 작업(side effect)을 실행할 수 있도록 하는 리액트 hook이다 

쉽게 말하자면... deps의 상태를 감지하여 변경이 있을 때만 function을 실행

 

useEffect( function, deps )
- function : 수행하고자 하는 작업( 리액트는 이 함수를 기억했다가 DOM 업데이트 후 불러냄)
		     또한 이 함수에서 함수를 return할 경우 그 함수가 컴포넌트가 Unmount 될 때 다시 한번 실행됨
         
- deps : 배열 형태이며 배열안에는 검사하고자 하는 특정값 or 빈배열이 옴
 	  deps안에 특정 값을 넣게 되면 컴포넌트가 mount 될때/ 지정한 값이 업데이트 될 때 useEffect를 실행

 

  useEffect( ()=> {
    console.log('i run only once.')
  }, []) //한번만 실행

 

  useEffect(()=>{
      console.log('i run when keyword changes.');
  },[keyword]) //keyword가 변화할때마다 실행됨.

 

 

cleanUp function 

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

function Hello(){
  useEffect( () => {
    console.log("hi :)");
    return () => console.log("bye :(")
  }, [])
  // useEffect(function(){
  //   console.log("hi :)")
  //   return function(){
  //     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;

컴포넌트가 ummount될때 

어떤 함수 등의 기능을 실행하고 싶다면 cleanUp function이용 

 

리액트의 component life cycle은 이러하다.

컴포넌트 생명 주기 (Component Life Cycle)

1. 마운트 (Mount)
마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미

2. 업데이트 (updatae)
컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우

3. 언마운트 (UnMount)
컴포넌트가 DOM에서 제거되는 것. 호출되는 함수는 하나로 componentWillUnmount 함수. 해당 컴포넌트가 제거되기 직전에 호출됩니다

 

컴포넌트가 Unmount되기전 return값을 이용하여 실행