useEffect()

useEffect()

• useEffect Hook은 클래스형 컴포넌트의 라이프 사이클 함수인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 볼 수 있다.
• 즉, useEffect는 컴포넌트가 Mount, Update, Unmount 된 후에 일을 처리한다.
• 컴포넌트의 라이프 사이클은 여기를 클릭하면 확인할 수 있다.
• 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 함수형 컴포넌트에서 위와 같은 경우에 직면할 경우 사용하는 것이 useEffect() 훅 이다.
• useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 전달한다.
• 리액트는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것이다.

---

사용법

• useEffect()의 기본 형태는 아래와 같다.
• 첫번째 인자로 렌더링 이후에 수행하고자 하는 함수를 받는다.
• 두번째 인자로 배열을 받는데, 배열 안에 검사하고자 하는 state나 props 값을 넣거나 빈 배열을 사용한다. 혹은, 두번째 인자를 비워두기도 한다.

React.useEffect(()=>, []);

렌더링 될 때마다 실행시킬 경우 (Mount or Update)

• useEffect의 두번째 인자를 비워두면 컴포넌트가 렌더링 될 때마다 매번 실행된다.

useEffect(()=>{
    console.log('Mount or Update')
});

컴포넌트가 Mount 되었을 경우

• useEffect의 두번째 인자에 []를 넣으면 컴포넌트가 제일 처음 렌더링 되었을 때만 딱 한번 실행된다.

useEffect(()=>{
    console.log('Mount');
},[]);

컴포넌트가 Update 되었을 경우 (props, staete가 바뀔 때)

• useEffect의 두번째 인자에 배열 안에 검사하고 싶은 값을 넣어주면 해당 값이 변경되어서 컴포넌트가 리렌더링 되었을 때 혹은 Mount, Unmount 되었을 때 실행된다.
• 만약, 업데이트 될 때만 함수를 실행시키고 싶으면 조건문을 걸어서 사용하자.
• 아래는 state라는 state값이 변경 되었을 경우 콘솔창에 Update라는 문구가 찍힌다.

const [count, setState] = React.useState(0)

useEffect(()=>{
    console.log('Update');
},[count]);

컴포넌트가 Unmount 되었을 경우 (화면에서 사라질 때)

• useEffect의 두번째 인자에 빈 배열을 넣고 첫번째 인자인 함수의 return 값으로 함수를 넣어주면 컴포넌트가 Umount시에 return 값으로 준 함수가 실행된다.
• 아래의 경우 만약 해당 useEffect를 가지고 있는 컴포넌트가 Unmount될 경우, 콘솔창에 Unmount라는 문구가 찍힌다!

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

---

예제 코드

• 버튼을 클릭하면 count라는 state가 1 증가하고 state가 0이 아닐 경우, UnmountTest 컴포넌트가 화면에서 사라진다.

App.js

import './App.css'
import UnmountTest from './UnmountTest'
import React, { useEffect } from "react";

const App = () => {
  const [count, setState] = React.useState(0)

  useEffect(() => {
    console.log('Mount or Update')
  });

  useEffect(() => {
    console.log('Mount');
  }, []);

  useEffect(() => {
    if (count !== 0) {
      console.log('Update');
    }
  }, [count]);


  return (
    <div className="App">
      <button style={{ fontSize: '50px' }} onClick={() => { setState(count + 1) }}>state 변경 {count}</button>
      {count === 0 ? <UnmountTest /> : null}
    </div>
  );
}

export default App;

UnmountTest.js

import React, { useEffect } from "react";

const UnmountTest = () => {

    useEffect(() => {

        return () => {
            console.log('Unmount');
        };
    }, []);

    return (
        <div style={{ background: 'yellow', fontSize: '50px' }}>
            UnmountTest
        </div>
    );
}

export default UnmountTest;

• 처음 실행시키면 콘솔창에 아래와 같은 결과가 나온다.

• 버튼을 클릭해서 count를 1 증가시키면 UnmountTest 컴포넌트가 Unmount되어 Unmount가 출력되는 것을 볼 수 있다.