React Hooks - useEffect

useEffect를 사용하는 이유

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무엇가를 실행하고 싶다거나 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무엇가를 실행하고 싶을 때 useEffect를 사용한다.

 

useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React { useEffect } from 'react'로 import 해서 사용한다.

 

useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다.

 

전체의 흐름은 아래와 같다.

1. inpust 값을 입력
2. value 즉 state가 변경
3. state가 바뀌었기 때문에 → app 컴포넌트가 리렌더링
4. 리렌더링 → useEffect()
5. 1~4

Dependency Array

의존성 배열

이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행한다.

 

clean up

// src/App.js

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])

	return <div>hello react!</div>
};

export default App;

 

속세를 벗어나는 버튼 을 만들었고 버튼을 누르면 useNavigate에 의해서 /todos로 이동하면서 속세 컴포넌트를 떠날 것이다. 그러면서 화면에서 속세 컴포넌트가 사라질 것 이고, useEffect의 return 부분이 실행될 것 이다. 

// src/SokSae.js

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const 속세 = () => {
  const nav = useNavigate();

  useEffect(() => {
    return () => {
      console.log(
        "안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
      );
    };
  }, []);

  return (
    <button
      onClick={() => {
        nav("/todos");
      }}
    >
      속세를 벗어나는 버튼
    </button>
  );
};

export default 속세;

 

정리.

useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어해주는 훅이다.

 

의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다. 

 

useEffect에서 함수를 1번만 실행시키고자 할 때는 의존성 배열을 빈 배열로 둔다.