useEffect

useEffect는 언제 사용할까

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

쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용합니다.

useEffect 코드

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

위의 코드에서 useEffect는 컴포넌트가 렌더링 될 때 console.log("hello useEffect") 를 실행시킨다.

의존성 배열

의존성 배열(dependency array) 이란?

useEffect에는 의존성 배열이라는 것이 있습니다. 쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것 입니다.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

의존성배열에 빈 배열[ ]을 넣은경우

• 처음 렌더링 될 때 한 번만 실행되고 그 이후에는 실행 되지않습니다.

의존성 배열에 값이 있는 경우

• [Number] 라는 값이 들어있으면 Number의 값이 바뀔 때마다 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;

위의 코드를 보면 useEffect 안에 콜백함수에서 return 이후에 작성하는 부분이 컴포넌트가 사라졌을 때 실행하고자 하는 함수입니다.(clean up)