[React] 의존성 배열을 쓰는 이유

useEffect를 사용할 때마다, 의존성 배열을 왜 써야 하는지에 대한 궁금증이 들지 않았는가?

의존성 배열이란 무엇인지 또한 짚어보아야 할 필요성이 있었다.

의존성 배열은 'useEffect' 훅에서 어떤 변수나 상태에 의존하고 있는지를 나타내는 배열이다.

이 배열을 사용하여 'useEffect'가 특정 변수나 상태의 변경을 감지하고, 해당 변경이 일어날 때만 실행되도록 제어할 수 있다.

아래의 코드는 의존성 배열이 없는 경우의 코드다.

[ 이전 예시 코드 ]

useEffect(() => {
    const retrospectResult = async () => {
        try {
            const retrospectDataForWrite = await getRetrospect({ userId: userId, workspaceId: workspaceId, retrospectId: retrospectId });
            setRetrospectQuestionsList(retrospectDataForWrite);
        } catch (error) {
            console.error('Error fetching retrospectWrite:', error);
        }
    };

    retrospectResult();
}); // 의존성 배열 추가되지 않음.

위의 코드를 실행할 경우에 아래와 같이 계속해서 렌더링이 일어나는 것을 볼 수 있었다.

그러나 이렇게 되면, 렌더링으로 인한 데이터 낭비를 비롯한 비효율적인 결과를 초래하게 되는 것이다.

따라서 이 문제를 방지하고자, 의존성 배열을 추가해주어 특정 변수나 상태의 변경을 감지하고, 해당 변경이 일어날 때만 실행되도록 제어해야 한다.

[ 이후 예시 코드 ]

useEffect(() => {
    const retrospectResult = async () => {
        try {
            const retrospectDataForWrite = await getRetrospect({ userId: userId, workspaceId: workspaceId, retrospectId: retrospectId });
            setRetrospectQuestionsList(retrospectDataForWrite);
        } catch (error) {
            console.error('Error fetching retrospectWrite:', error);
        }
    };

    retrospectResult();
}, [userId, workspaceId, retrospectId]); // 의존성 배열 추가

위의 코드를 실행할 경우에는 아래와 같이 한 번만 렌더링이 일어나는 것을 볼 수 있고, 특정 변경 사항이 일어났을 때에만 렌더링이 발생한다는 것을 알 수 있다.

react 개발을 하다 보면, useEffect를 많이 사용하게 된다. 그럴 때 의존성 배열에 대한 부분을 충분히 고려해야 한다는 점을 인지했으면 좋겠다.