React useEffect 란?

컴포넌트가 렌더링이 될때마다 수행하게 되는 리액트 훅 으로 Side-effect를 처리하기 위해 사용합니다.

 

Side-Effect(부작용) 란?

기대했던 효과 외에 나타나는 다른 작용을 말하며, 부작용은 흔히 유해하다고 생각하는 분들이 많지만 항상 나쁜 방향으로만 일어나는 것은 아닙니다. 그 예로 고혈압 치료제 성분 중 하나인 미녹시딜이 현재는 탈모치료에도 사용되는 것 처럼 말이죠

 

하지만 React에서 side-effect는 조금 다른 의미를 가지고 있으며, 부정적으로 생각하고 있습니다.

React에서 side-effect란 컴포넌트가 화면에 렌더링된 이후에
비동기로 처리되어야 하는 부수적인 효과들을 Side-Effect(부작용)라고 합니다.

예를들면 함수의 전역변수 값을 변경하거나 혹은 함수 외부에 존재하는 파일을 사용하거나, 쿠키에 저장, 네트워크를 통한 데이터 전송, API 처리 등이 있습니다.

 

이처럼 함수가 실행되면 함수 외부에 존재하는 값이나 상태에 영향을 주기 때문에 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치기 때문에 Side-Effect를 일으킨다고 합니다.

이러한 Side-Effect는 프로그램을 읽기 어렵게 하고 실행상태를 예측하기 어렵게 하며, 개발비용을 증가시킨다고 보기 때문에 리액트 에서도 Side-Effect 처리를 위해 useEffect() 함수를 제공 합니다.

 

useEffect 사용법

useEffect는 첫 번째 인자로 명령형 또는 어떤 effect를 발생하는 함수를 받고, 두 번째 인자로 의존값이 들어있는 배열을 넣게 됩니다. 

 

만일 의존성 배열을 비우게 되면, 컴포넌트가 처음 나타날때에만 useEffect 함수가 호출되며, 빈 배열로 두게 되면 컴포넌트가 실행 될때마다 매번 useEffect 함수가 호출 됩니다.

[의존성 배열에는 useEffect의 호출이 필요한 시점의 특정 값을 작성하는게 좋습니다.]

 

useEffect의 clenup 함수 란?

마지막으로 useEffect에는 return 문으로 함수를 반환할 수 있는데 이를 clenup 함수라고 부릅니다.

clenup 함수의 용도는 컴포넌트가 실행(Mounting) 되고 종료(Unmounting) 되었을 때 useEffect로 실행 중인 이벤트를 종료하지 않고 넘어가게 되면 다시 컴포넌트가 실행되거나 혹은 useEffect의 의존성 배열의 특정 값이 호출될 때마다 이벤트가 중복으로 실행되는 문제가 생길 수 있으며, 이를 방치하게 된다면 큰 문제를 유발할 수 있습니다.

 

이제 useEffect를 어떻게 사용하면 좋을지 예제로 설명을 해보도록 하겠습니다.

아래의 예제는 타이머를 실행하고 종료하는 예제로 별코딩님 강의를 보고 작성 하였습니다.

import React, { useState, useEffect } from 'react';

const Timer = () => {
    const [showTimer, setShowTimer] = useState(false);

    useEffect(() => {
        let timer;
        if(showTimer){
            timer = setInterval(() => {
                console.log("타이머가 실행 중 입니다.");
            }, 1000);
        }

        return () => {
            clearInterval(timer);
            console.log("타이머가 종료 되었습니다.")
        };

    }, [showTimer]);

    return (
        <div>
            {showTimer && <div>타이를 시작합니다. 콘솔 확인</div>}
            <button
                onClick={() => setShowTimer(!showTimer)}
            >타이머 실행</button>
        </div>
    );
}

export default Timer;

 

[컴포넌트: Mounting]

처음 컴포넌트가 실행이 되면서 useEffect도 실행이 되고 useEffect가 종료 되면서 clenup 함수가 실행이 되서 타이머가 종료 되었습니다. 콘솔이 뜨게 됩니다.

 

[컴포넌트: Updating]

타이머 실행 버튼을 클릭하게 되면 타이머가 실행이 되면서 숨겨져 있던 타이머를 시작한다는 문구가 뜨면서 타이머를 시작하게 됩니다.

 

[컴포넌트: Unmounting]

그리고 다시 한번더 타이머 실행 버튼을 클릭하게 타이머가 시작된다는 문구와 함께 타이머가 종료 됩니다.