useEffect

1. 소개

import { useEffect } from 'react';

• 리액트 컴포넌트가 렌더링 된 이후에 다양한 함수를 수행할 수 있도록 하는 Hooks이다.
  • DOM 업데이트를 수행한 이후에 호출된다.

2. 실행

useEffect(() => {
   console.log('useEffect 실행');
   
   return () => {
      console.log('clean up 실행');
   }
}, []);

• useEffect의 인자는 2개가 존재한다.
  1. 수행할 콜백 함수
  2. 의존성 배열
• 의존성 배열의 존재 유무, 의존성 배열 안에 변수 유무에 따라 수행하는 방식이 달라진다.
• return으로 함수를 반환하는 것을 cleanup 함수라고 한다.
  • cleanup 함수는 컴포넌트의 언마운트시 실행된다.
  • return을 안 쓰면 cleanup 함수는 실행되지 않는다.

3. 예제

3 - 1 의존성 배열에 변수가 없는 경우

import { useState, useEffect } from 'react';

function ExampleComponent() {
   const [count, setCount] = useState(0);
    
   useEffect(() => {
      setCount(count + 1);
   }, []);

   return (
      <h1>{count}</h1>
   );
};

export default ExampleComponent;

• 초기 렌더링 이후 한 번만 실행된다.
  1. count 변수의 초기값이 0이므로 초기 렌더링 시 0이 보인다.
  2. 초기 렌더링 이후 useEffect가 실행된다.
  3. setCount 함수가 실행되고 count는 1이 증가한다.
  4. 최종적으로 화면에는 1이 보일 것이다.

3 - 2 의존성 배열에 변수가 있는 경우

import { useState, useEffect } from 'react';

function ExampleComponent() {
   const [count, setCount] = useState(0);
    
   useEffect(() => {
      setCount(count + 1);
   }, [count]);

   return (
      <h1>{count}</h1>
   );
};

export default ExampleComponent;

• 초기 렌더링 이후 의존성 배열 안의 변수가 변할 때마다 실행된다.
  1. count 변수의 초기값이 0이므로 초기 렌더링 시 0이 보인다.
  2. 초기 렌더링 이후 useEffect가 실행된다.
  3. setCount 함수가 실행되고 count는 1이 증가한다.
  4. count의 변화가 생겼기 때문에 다시 useEffect가 실행된다.
  5. 최종적으로 화면에는 3번 4번이 반복되어 1씩 계속 증가하는 것이 보일 것이다.

3 - 3 의존성 배열이 없는 경우

import { useState, useEffect } from 'react';

function ExampleComponent() {
   const [count, setCount] = useState(0);
    
   useEffect(() => {
      setCount(count + 1);
   });

   return (
      <h1>{count}</h1>
   );
};

export default ExampleComponent;

• 초기 렌더링 이후 리렌더링이 발생할 때마다 실행된다.
  1. count 변수의 초기값이 0이므로 초기 렌더링 시 0이 보인다.
  2. 초기 렌더링 이후 useEffect가 실행된다.
  3. setCount 함수가 실행되고 count는 1이 증가하여 리렌더링이 발생한다.
  4. 리렌더링이 발생했기 때문에 다시 useEffect가 실행된다.
  5. 최종적으로 화면에는 3번 4번이 반복되어 1씩 계속 증가하는 것이 보일것이다.