useEffect의 필요성

React의 장점은 서버와의 통신필요 없이 바뀌는 부분만 렌더링을 해주기 때문에 효율적이다.

효과적이지만 만약 데이터용량이 큰 자료를 가져오는데 그 작업이 렌더링 될 때마다 자료를 가져오는 동작을 수행한다면, 비효율적이 된다.

useEffect의 활용

useEffect는 다음과 같이 실행한다.

useEffect는 함수로 인자로 콜백함수와 배열을 받는다.

useEffect(콜백함수, 배열)

useEffect는 배열 부분에 어떠한 값이 들어와있는지에 따라 콜백함수를 실행시킨다.

1. 인자로 콜백함수만 전달받고 배열을 전달받지 못했을 때 > 매번 콜백함수 실행

2. 인자로 배열을 전달받았을 때 > 배열안의 원소의 값을 감지하고 원소들의 값이 바뀔 때마다 콜백함수 실행

3. 인자로 빈 배열을 전달받았을 때 > 최초 렌더링 시에 한 번만 콜백함수실행

useEffect의 cycle

1. 컴포넌트가 렌더링 된다.
2. useEffect의 콜백함수가 실행된다.
3. 컴포넌트가 다시 렌더링되면 의존성배열의 값을 확인한다.
4. 바뀐값과 의존성배열의 내부값이 같다면 한번 더 콜백함수 실행, 없다면 실행하지 않음
5. 3~4번 반복

useEffect의 정리

useEffect를 실행시키고 함수를 정리하지 않으면 다음과 같은 문제점이 생긴다.

useEffect를 사용하여 버튼을 클릭하면 타이머가 실행되고 버튼이 또 클릭되면 타이머 컴포넌츠가 unmount되는 프로그램을 짰다.

아래는 타이머 컴포넌츠

function Timer(){
useEffect(()=>{
        const timer = setInterval(()=>{
            console.log('타이머 돌아가는 중...')
        }, 1000)
    },[])

    return(
        <h1>콘솔에 타이머 실행중</h1>
    )
}

아래는 메인

function Main(){
    const [showTime, setShowTime] = useState(false);

    function onClick(){
        setShowTime(!showTime);
    }

    return (
        <>
            {showTime ? <Timer /> : null}
            <button onClick={onClick}>Toggle Timer</button>
        </>
    )}
export default Main

메인페이지에 버튼하나를 만들고 클릭시에 showTime이 true가 되어 타이머 컴포넌츠를 실행시킨다.

한번 더 클릭시에 showTime이 false가되어 Timer컴포넌츠는 언마운트된다.

실행 예시)

최초 실행시에 다음과 같은 버튼만있다. 버튼을 클릭하면

다음과 같은 h1태그가 생성되면서

콘솔에 타이머가 찍힌다.

한번 더 클릭하여 언마운트 시켜보겠다.

h1태그가 사라지고 언마운트 되었다. 하지만 콘솔창을 들여다보면

타이머는 계속 돌아가고있다..

이게 useEffect에서 정리작업이 필요한 이유이다.

useEffect를 정리해 주기 위해서는 정리함수를 리턴해주고 그 정리 함수 내부에서 정리작업을 해주면 unmount되면 useEffect가 정리된다.

위의 예시에서는 리턴함수에 setInterval을 정리하는 clearInterval을 실행시켜주면 된다.

function Timer(){
    useEffect(()=>{
        const timer = setInterval(()=>{
            console.log('타이머 돌아가는 중...')
        }, 1000)

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

    },[])

    return(
        <h1>콘솔에 타이머 실행중</h1>
    )
}

다음과 같이 해주고 실행시키면

타이머가 종료되었습니다.가 콘솔에 찍히고 이후에는 타이머가 돌아가지 않는 것을 확인할 수 있다.