useEffect의 실행순서

Q useEffect의 실행 순서에 대해 설명해주세요.

A

useEffect는 리액트 컴포넌트가 렌더링된 후에 실행됩니다.
값을 입력 및 변경하면, state가 변경되기 때문에 App 컴포넌트가 리렌더링 됩니다.
리렌더링 되었기 때문에 useEffect가 실행됩니다. 이 과정은 계속 순환됩니다.
또한 의존성 배열에 값을 넣으면 그 값이 변화할 때만 실행됩니다.

1. useEffect

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

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

2. 의존성 배열

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

1)의존성 배열이 빈 배열인 경우
따로 지정한 것이 없으면 리렌더링 시 1번만 실행

2)의존성 배열에 값을 넣은 경우
넣은 값이 변경하는 경우 리렌더링

3. clean up

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;