배경
프로젝트 진행 중, useEffect()를 남용했다가 콘솔에서 너무 많은 요청을 한다는 이유로 오류메시지가 표시되었다
이에 useEffect()에 대하여 조금 알아보았고, 알아본 내용을 바탕으로 정리하여 작성한다 !
useEffect() 는 React의 훅(Hook) 중 하나로, 컴포넌트의 렌더링이 완료된 후에 특정 작업을 수행하거나, 컴포넌트가 사라지기 전에 필요한 정리 작업을 수행할 수 있도록 해줍니다.
useEffect() 는 두 개의 인자를 받습니다. 첫 번째 인자는 함수이며, 렌더링이 완료된 후에 실행될 작업을 정의합니다. 두 번째 인자는 배열이며, 해당 배열에 포함된 값들이 변경되었을 때만 첫 번째 인자로 전달된 함수를 실행하도록 하는 역할을 합니다.
예를 들어, 다음 코드는 useEffect()를 사용하여 화면이 처음 로딩될 때, 그리고 count 값이 변경될 때마다 특정 작업을 수행한다.
import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
const Example = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('component did mount or count changed');
}, [count]);
return (
<View>
<Text>{count}</Text>
<Button title="Increment" onPress={() => setCount(count + 1)} />
</View>
);
};여기서 useEffect() 함수의 첫 번째 인자로 전달된 함수는
console.log('component did mount or count changed')
입니다. 이 함수는 컴포넌트가 처음 렌더링될 때, 그리고 count 값이 변경될 때마다 실행됩니다.
두 번째 인자로 [count] 배열이 전달되었습니다. 이 배열은 count 값이 변경될 때마다 첫 번째 인자로 전달된 함수를 실행하도록 합니다. 만약 이 배열을 전달하지 않으면, count 값이 변경될 때마다 첫 번째 인자로 전달된 함수가 계속해서 실행되기 때문에 성능 문제가 발생할 수 있습니다.
다음은 내가 했던 실수에 관한 내용이다
useEffect의 두 번째 인자로 아무것도 주지 않으면, 첫 번째 인자로 전달된 함수는 컴포넌트가 렌더링될 때마다 실행됩니다.
즉, 이 함수는 렌더링이 완료될 때마다 매번 실행되는 것입니다. 이는 성능 문제를 야기할 수 있습니다.
예를 들어, 컴포넌트 내부에서 사용되는 상태 값이 변경될 때마다 매번 렌더링이 일어나는데, 이때마다 useEffect에서 처리하는 작업이 매번 실행된다면 성능에 부담을 줄 수 있습니다.
따라서, 만약에 useEffect에서 처리하는 작업이 특정 상태 값의 변화에만 의존하는 경우, 두 번째 인자로 해당 상태 값을 넣어주는 것이 좋습니다. 이렇게 하면 해당 상태 값이 변경될 때만 함수가 실행되어 성능을 최적화할 수 있습니다.
만약 useEffect에서 처리하는 작업이 컴포넌트가 처음 로드될 때, 또는 컴포넌트가 사라지기 직전에만 실행되어야 하는 경우에는 두 번째 인자로 빈 배열([])을 전달해주면 됩니다. 이렇게 하면 해당 함수는 컴포넌트가 처음 로드될 때와 사라지기 직전에만 실행됩니다.
나는 그래서 두번째 인자에 빈 배열을 전달해주는 방법으로 컴포넌트가 처음 로드될 때만 실행되도록 하는 방법으로 오류를 해결하였다.
심화
useEffect의 첫 번째 인자로 여러 개의 함수를 전달하는 것은 가능합니다.
그러나 이 경우에는 첫 번째 함수가 마운트 이후에 실행되고, 그 다음 함수부터는 이전 함수가 리턴한 클린업 함수가 실행되고 난 이후에 순차적으로 실행됩니다.
예를 들어, 다음과 같이 useEffect에 두 개의 함수를 전달하면, 첫 번째 함수는 컴포넌트가 처음 렌더링될 때 실행되고, 두 번째 함수는 이전 함수에서 반환한 함수가 실행된 후에 실행됩니다.
useEffect(() => {
console.log('First function executed');
return () => {
console.log('First function cleanup executed');
};
}, []);
useEffect(() => {
console.log('Second function executed');
return () => {
console.log('Second function cleanup executed');
};
}, []);위의 코드에서, 첫 번째 함수는 console.log('First function executed')를 실행하고,
두 번째 함수는 console.log('Second function executed')를 실행합니다.
그리고 두 함수 모두 []를 두 번째 인자로 받고 있으므로, 둘 다 컴포넌트가 처음 렌더링될 때만 실행됩니다.
그리고 이전 함수에서 반환된 클린업 함수가 실행되는 시점은 다음과 같이 표현됩니다.
First function executed
Second function executed
// cleanup 함수 실행
First function cleanup executed
Second function cleanup executed결과적으로, 첫 번째 함수가 실행된 후에는 두 번째 함수가 실행되지 않고, 첫 번째 함수에서 반환된 클린업 함수가 실행된 후에 두 번째 함수가 실행됩니다.
따라서, useEffect의 첫 번째 인자로 여러 개의 함수를 전달해도 됩니다. 다만, 함수들의 실행 순서와 클린업 함수들의 실행 순서에 대해서는 주의해야 합니다.
댓글