useEffect는 리액트에서 사이드 이펙트 (Side Effect) 를 처리하기 위해 사용되는 리액트 훅 (Hook) 이다. 사이드 이펙트는 컴포넌트 외부와 상호작용하는 작업을 의미한다.
리액트 컴포넌트에는 생명 주기 (LifeCycle) 가 있다. 생명 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.
마운드(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.
업데이트(Update)는 컴포넌트가 업데이트 되는 것을 의미하며, props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때 등이 있다.
언마운트(UnMount)는 컴포넌트가 DOM에서 사라질 때를 의미한다.
useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 사이드 이펙트를 정의한 함수이고, 두 번째 인자는 의존성 배열(Dependency Array)이다. 의존성 배열은 선택적으로 사용할 수 있으며, 배열에 포함된 값들이 변경될 때만 부수 효과 함수가 실행되도록 제어할 수 있다....는데.....
이게 무슨 말이냐면, 아래 코드를 보자,
import React, { useEffect, useState } from 'react';
function App() {
const [num, setNum] = useState(0);
useEffect(() => {
console.log('useEffect 실행!');
}, [num]);
return (
<button onClick={()=>{setNum(num++)}}>눌러라.</button>
);
}
위 코드를 보면, useEffect
가 실행될 때 마다, 콘솔에 useEffect 실행!
이라는 문자열이 뜨는 코드이다. 또한 의존성 배열 안에 useState
변수 num
이 들어가 있다.
자, 그러면 이게 과연 어떻게 돌아갈까???
일단 useEffect는 컴포넌트가 렌더링 되면 한번 실행된다. 따라서 버튼을 누르지 않아도, 일단 콘솔에는 useEffect 실행!
이 한번 출력될 것이다.
이제 의존성 배열에 대해 살펴볼 차례이다. 아까 위에서 useEffect
는 의존성 배열에 들어가 있는 값이 변경되면 내부코드를 실행한다 했다. 우리가 버튼을 누르면, useState
변수 num
을 1더해준다. 의존성 배열내부의 값이 변경되었기 때문에, 콘솔에 useEffect 실행!
이 찍히게 된다.