useEffect

useEffect 는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook.

컴포넌트가 화면에 처음 보여지거나, 사라질 때를 제어할 수 있다. (컴포넌트 렌더링 프로세스 관리)

 

 

■  특징

• useEffect는 useEffect가 속한 컴포넌트가 최초 렌더링 된 이후 실행된다.
• ➜  컴포넌트의 상태가 바뀌어서 업데이트 되기 전과 될 때에도 실행되고 리렌더링 될때에도 실행된다.
• 2개의 인자를 받는다.
• ➜  첫번째 인자 : 콜백함수
• ➜  두번째 인자 : 의존성 배열(어떤 state가 변경되면 실행할 지 정해준다)

 

■  렌더링 순서

• 최초 렌더링  ➜  useEffect 내부 함수  ➜  set함수 실행  ➜  state 변경  ➜  리렌더링

 

■  사용방법

import { useEffect } from 'react';

const App = () => {
  useEffect(() => {
// 여기코드는 모든 렌더링 후에 실행됨
    (컴포넌트가 나타났을 때(mount) 실행할 함수)

// clean up
  	return () => {
    (컴포넌트가 사라졌을 때(unmount) 실행할 함수)
   }
  }, [의존성배열]);
  
 return <div />;
};

 

 

■  의존성 배열 : useEffect 의 동작 trigger

 

⚬  의존성 배열에 값이 있는 경우

배열에 넣은 값이 바뀔 때만 useEffect 가 실행된다.

주로 state 변경에 사용

 

⚬  의존성 배열이 빈 배열일 경우

컴포넌트가 렌더링 된 후 단 한번만 실행된다.

주로 fetch 에 사용

 

* 의존성 배열이 없는 경우

useEffect를 쓰는 이유가 없음. 의존성 배열 없이는 useEffect 사용하지 말 것!

 

■  clean up

컴포넌트가 사라졌을 때 동작하는 함수

useEffect 안에서 return 을 해주고 실행되길 원하는 함수를 넣어준다.

 

 

■  mount / unmount

⚬ mount(생성) : 함수형컴포넌트가 연결됐을 때(사용중)

⚬ unmount(제거) : 함수형 컴포넌트가 사라질 때(사용되지않을 때)

 

 

 

 

참고

https://ko.react.dev/learn/synchronizing-with-effects

https://ko.react.dev/reference/react/useEffect