[REACT] useEffect

React component가 랜더링 될때마다 side effect를 실행 할 수 있도록 하는 리액트 Hook!
함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용가능하다.

사용법

---

useEffect(function, deps)

• function : 실행하고자 하는 함수
• deps : 의존성 배열 → function을 실행시킬 조건 → deps에 특정값을 넣으면 컴포넌트가 마운트 될때, 지정한 값이 업데이트될때 useEffect를 실행한다.

import React from 'react';
import { useEffect } from 'react';

function Test() {

    useEffect(() => {
        console.log('useEffect실행!')
    }, [])

    return (
        <div>
        </div>
    );
}

export default Test;

언제 실행될까?

---

1. 컴포넌트가 Mount 될때
2. 컴포넌트가 Update 될때, (== props, state등 변경될때)
3. 컴포넌트가 Unmount 될때

Cleanup

---

useEffect는 함수를 반환하는데 이를 Cleanup이라고 한다

useEffect(() => {
    console.log("컴포넌트 나타남");
    console.log(name);
    return () => {
      console.log("cleanUp 함수");
    };
  });```
  
  
  
  ### useEffect, useState활용
 ---
  ```javascript
import React from 'react';
import { useState } from 'react';
import { useEffect } from 'react';

function Test() {

    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log('useEffect실행!')
        return () => {
            console.log('cleanup')
        }
    }, [count])

    return (
        <div>
            {count}
            <button onClick={() => { setCount((prev) => prev + 1) }}>+1</button>
        </div >
    );
}

export default Test;

• useState는 count라는 상태를 관리하고 버튼을 클릭하면 1 증가시킨다
• useEffect는 최초 마운트 될때 실행되고, count 값이 바뀔때마다 실행한다
• useEffect의 cleanup함수가 실행되고 console.log(’useEffect실행’)이 실행된다