React Hooks 2 - useEffect

 

 

 

useEffect

리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook

 

 

App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있는 console.log가 실행

즉 컴포넌트가 렌더링 된 이후 실행된다고 보면 쉽다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

  return <div>Home</div>;
}

export default App;

 

 

의존성 배열

배열에 적은 값이 바뀔때만 useEffect를 실행

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

 

1. 의존성 배열이 빈 배열인 경우 : 최초 렌더링 이후 딱 한번만 실행

2. 값이 있는 경우 : 해당 값이 변경되었을 때 마다 실행