useEffect

기본형태

useEffect( function, deps )

• function : 수행하고자 하는 작업(화살표 함수의 형태를 취한다)
• deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

---

useEffect() 불러오기

import React, { useEffect } from "react";

---

useEffect 조건

1. Component가 mount 됐을 때 (처음 렌더링 될 때)

• 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.

  useEffect(() => {
    console.log('처음 렌더링 될 때만 실행된다');
  }, []);

2. 렌더링 될 때마다 실행

• 렌더링 될 때마다 실행하고 싶을 때는 deps 위치에 아무것도 넣지 않는다

 useEffect(() => {
    console.log('렌더링 될 때 마다 실행된다');
  });

3. Component가 update 될 때 (특정 props, state가 바뀔 때)

• 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

• (의존값이 들어있는 배열 deps 이라고도 한다. dependency를 의미.)

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
    useEffect(() => {
    console.log(name);
    console.log('업데이트 될 때 실행된다');
  }, [count]);
  
  const handleClick = () => {
  	setCount(count + 1);
  }

  return (
    <div>
      <p>클릭횟수 : {count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

• count state가 업데이트 될 때마다 실행된다

4. Component가 unmount 될 때(사라질 때) & update 되기 직전에

• cleanup 함수 반환 (return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.)
• 언마운트 될 때만 cleanup 함수를 실행하고 싶을 때 : 두 번째 파라미터로 빈 배열을 넣는다.

  useEffect(() => {
    console.log(Effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  }, []);