useEffect()

useEffect 함수란?

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

useEffect는 component가 mount 됐을 때, conponent가 unmount 됐을 때, component가 update 됐을 때 특정 작업을 처리할 수 있다.

즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사하기 위해 사용하는 함수이다.

---

useEffect 사용 방법

import React, { useEffect } from 'react';

useEffect( function, deps )

`function`: 수행하고자 하는 작업
`deps`: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열
</br>


<span style='color: #0593d3'>**1. Component가 mount 됐을 때(처음 나타났을 때)**</span>

```js
useEffect(() => {
  console.log('마운트 될 때만 실행된다');
}, []);

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

배열을 생략한다면 리렌더링 될 때 마다 실행 된다.

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

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

useEffect(() => {
  console.log(name);
  console.log('업데이트 될 때 실행된다');
}, [name]);

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

업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.

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

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

cleanup함수 반환(return 뒤에 나오는 함수이면 useEffect에 대한 뒷정리 함수라고 한다.)

언마운트 될 때만 cleanup 함수를 실행하고 싶을 때
👉 두 번째 파라미터로 빈 배열을 넣는다.

특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때
👉 deps 배열 안에 검사하고 싶은 값을 넣어준다.

🚧deps에 특정 값 넣기

deps에 특정 값을 넣게 된다면 컴포넌트가 처음 마운트 될 때, 지정한 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.

useEffect 안에서 사용하는 상태나 props가 있다면, useEffect의 deps에 넣어주어야 하는 것이 규칙이다.
만약 사용하는 값을 넣어주지 않는다면, useEffect 안의 함수가 실행될 때 최신 상태, props를 가리키지 않는다.

deps 파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 useEffect 함수가 호출된다.






📚Reference
React Hooks:useEffect() 함수