useEffect

- 요약

 

설정한 useState 값이 바뀌면 등록한 함수가 실행.

페이지가 렌더링되고 무조건 최초 한번은 실행 됨.

 

 

# 모듈 선언

import React, { useEffect } from "react";

 

 

# useEffect 선언

useEffect(() => {}, [value]);

value 값이 변경되면 함수가 실행된다.

 

value = 변수,

 case 1) value를 넣지 않고 []인 상태면, 최초 한번만 실행

 case 2) value를 넣으면 value 값이 업데이트 될 때만 실행

 case 3) 아예 비워 놓으면 리렌더링 할 때마다 실행

 

() => {} = 변수가 변경되면 실행할 함수

 

 

ex)

  const [iu, setIu] = useState(0); -> iu를 0으로 초기화

  useEffect(() => { test(); }, [iu]); -> 최초 실행 시 test 함수 한번 호출

  setIu(iu + 5); -> iu 값이 변경되면 test 함수 호출

 

 

# useEffect로 componentWillUnmount 동작

return문에 화살표 함수를 넣어 적용할 수 있다.

 

 ex)

useEffect(()=>{
    return(() => {console.log("componentWillUnmount");});
}, [])

     

const HomePage = () => {

  const [test, setTest] = useState(0);
  useEffect(()=>{

    console.log("A", test);

    return () => {console.log("B", test)};
  },[test]);

  return (
    <div>
      <button onClick={()=>{
        setTest(test + 1);
      }}/>
    </div>
  );
};


결과

처음 Rendering A 0 출력
button 클릭 시 Rerendering 전 unmount 될 때 B 0 
Rerendering 후 A 1 

button 클릭 시 test가 1씩 증가하며 반복