useEffect

useEffect 

 

어떤 일이 일어났을 때 자동으로 해주는 일꾼

 

일해라 닝겐아 

 

useEffect는 리액트에서 어떤 일이 일어날 때 자동으로 무언가를 해주는 도구

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

 

useEffect 사용 방법 

기본 구조: useEffect는 두 개의 인자를 받는다 

 

첫 번째 인자는 함수로, 이 함수는 컴포넌트가 렌더링될 때 실행됩니다.

두 번째 인자는 배열로, 이 배열에 있는 값이 변경될 때마다 첫 번째 인자가 다시 실행됩니다.

두 번째 인자의 배열 (dependency array):

빈 배열 ([]): useEffect가 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

특정 값이 들어있는 배열 ([value]): value가 변경될 때마다 useEffect가 실행됩니다.

배열을 생략하면: 컴포넌트가 렌더링될 때마다 실행됩니다.

 

 

 

 

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 여기에 실행할 코드를 작성합니다.
    console.log('컴포넌트가 화면에 나타났습니다.');

    // 정리(cleanup) 함수: 컴포넌트가 화면에서 사라질 때 실행됩니다.
    return () => {
      console.log('컴포넌트가 화면에서 사라졌습니다.');
    };
  }, []); // 빈 배열([])은 이 코드가 처음 렌더링될 때만 실행되도록 만듭니다.

  return <div>안녕하세요, 리액트!</div>;
}