useEffect

useEffect

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

컴포넌트가 마운트 됐을 때, 컴포넌트가 언마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 특정 작업을 처리할 수 있다.

즉, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용해야한다.

 

 

 

 

 

useEffect() 사용법

 

기본형태

useEffect(function, deps)

 

- function: 수행하고자 하는 작업

- deps: 배열 형태이며 의존성 배열이라고 한다. 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

 

 

 

 

 

활용해보기!

 

import를 사용해 useEffect 함수를 불러온다. 

import React, { useEffect } from 'react';

 

 

 

1. 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)

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

useEffect(() => {
	console.log("마운트 될 때만 실행");
}, []);

 

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

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

 

 

 

 

 

2. 컴포넌트가 업데이트 될 때 (특정 props, state가 바뀔 때)

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

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

 

 

 

 

 

3. 컴포넌트가 언마운트 될 때 (사라질 때) & 업데이트 되기 직전에

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

 

언마운트 될 때만 cleanup 함수를 실행하고 싶을 때

: 두 번째 파라미터로 빈배열을 넣는다.

 

특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때

: deps 배열 안에 검사하고 싶은 값을 넣는다.

 

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

 

 

 

 

cleanup 함수란?

- 클린업이란 어떤 컴포넌트가 화면에서 사라졌을 때, 무언가를 실행하는 과정을 클린업이라고 표현한다.

- 클린업 하는 방법은 useEffect 안에서 return을 하고 실행되길 원하는 함수를 작성하면 된다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;

 

예시

// 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 속세;