[React]Hook: useEffect()

seEffect() 란?

컴포넌트가 렌더링 될 때 특정 작업을 한번만 실행하거나 의존성 배열이 있는경우 변경이 될때마다 실행을 도와주는 훅 입니다.

---

useEffect(function, deps)

import React, { useEffect } from "react"; //import하기

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

파라미터 설명

function: 실행하고자 하는 함수(콜백함수)

deps: 배열형태, function을 실행시킬 조건이다. 크게 세가지 경우로 나뉜다.

• deps에 특정값을 넣는경우: 컴포넌트가 mount 될 때 + deps 값이 업데이트될 때 useEffect를 실행한다. 
• 빈 배열일 경우: useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 된다. 렌더링되고 한번만 호출이 된다.
• deps 파라미터를 생략 할 경우: 컴포넌트가 리렌더링 될 때마다 호출이 된다.

---

Clean Up 함수

useEffect는 함수를 반환할 수 있는데 이 함수를 cleanup이라고 한다.

 

useEffect(() => {

 return () => { // 클린업 함수
 };
 
},[]);

 

Unmount 될 때만 cleanup 함수를 실행시키고 싶다면 deps에 빈 배열을,
특정 값이 업데이트되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 된다.

 

---

[도움이 되는 사이트]

벨로퍼트와 함께하는 모던 리액트 (https://react.vlpt.us/basic/16-useEffect.html)

useEffect 완벽 가이드(https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko)

(유튜브)useEffect 깔끔하게 마스터하기(https://www.youtube.com/watch?v=kyodvzc5GHU&t=396s)