[React] useEffect 이해하기

지난 글에서 살펴본 useState는 어플리케이션의 상태(State)값을 바꿔 구성요소를 업데이트 하는 훅(hook)*이었는데, useEffect는 반대로 상태에 따라 어떤 특정 동작을 하도록 명령하는 훅이다.

import {useEffect} from 'react'; //호출

useEffect(function, deps);

useState와 마찬가지로 리액트의 내장된 기능이기 때문에 아래와 같이 상단에서 호출(import)만 해주면 쓸수 있으며, 기본적인 사용법은 위와 같이 수행할 기능과 의존성(dependencies)을 입력하면 되는데, 여기서 의존이란 이 useEffect가 수행되기 위한 조건이 되는 상태를 말한다고 보면 된다. 즉 두번째 인자에서 정의된 상태(state)의 변화에 의존하여 기능(function)을 수행하는 것이다.

이 상태의 변화란 크게 나누면 세 가지로 정의해볼 수 있는데, 구성요소 내의 특정 상태값이 바뀌었을 때, 해당 구성요소가 연결(mount)되었을 때 (1회), 의존성 없이 구성요소가 렌더링 될 때마다 수행 이렇게 세 가지 이다. 더 쉽게 풀어보면 구성요소의 상태가 바뀔 때 그 상태값의 변화에 따른 조건으로 수행하는 기본 기능과 특정 구성요소가 어플리케이션에서 동작하는 첫 1회에 동작하는 초기화 기능,  그리고 의존성 없이 구성요소의 어떠한 변화에도 계속 동작하는 기능을 넣고 싶을 때 useEffect를 사용할 수 있다.

각 경우에 따라 의존성(denpencies)의 정의와 사용법이 달라지는데, 각각을 살펴보면 아래와 같다.

1) 특정 상태 값에 따른 조건화 기능으로 사용 시

useEffect(stateChanged, [state]);

function stateChanged () {
	console.log('Changed:', state);
}

위와 같이 두번째 인자에 의존할 배열을 넣어주면 해당 배열에 해당하는 값이 변할 때마다 효과가 수행된다. 이 때 주의할 점이, 두번째 인자로 정의된 state는 구성요소가 처음 렌더링될 때에도 한번 변하기 때문에 렌더링 시에도 한번 수행된다. 때문에 이러한 동작을 원하지 않는다면 회피가 필요하다.

2) 연결(mount) 시 초기화 기능으로 사용 시

useEffect(initFunc, []);

function initFunc () {
	console.log("initialized.");
}

두번째 배열이 빈 배열이면 의존성 자체는 정의가 되었으나 의존할 상태가 없는 훅이 된다. 이 경우, 조건으로 볼 대상이 없기 떄문에 구성요소의 초기 렌더링 시에만 1회 수행되고 실행되지 않는 기능으로 사용할 수 있다.

3) 렌더링 시 마다 재실행

useEffect(anyChange);

function anyChange () {
	console.log("something happened.");
}

두 번째 인자에 배열 자체가 정의되지 않으면 이 useEffect 훅은 의존하지 않는 훅이라는 의미가 된다. 즉, 구성요소의 모든 상태변화에 대응하게 되며 다시 렌더링되는 모든 경우마다 실행된다.

첫 번째 인자인 설정함수에 정리(cleanup)함수를 포함하면 설정 => 정리로 동작하는 대응형 실행 구조를 만들 수도 있는데, 이 부분은 다음 포스트를 통해 이어서 알아볼 예정이다.