[React .hook] What is useEffect ?

Before we start

 

들어가기에 앞서 이미 많이 사용해 본 경험이 있는 가장 대표적인 React hook중에 하나인 useEffect에 대해서 

 

심층적으로 알아볼까 한다.

 

A suitable situation for using 'useEffect'

1. Mount 될때 특정 작업을 실행해야 한다면 ?

 

2. Update 될때 특정 작업을 실행해야 한다면 ?

 

3. Unmount 될때 특정 작업을 실행해야 한다면 ?

 

What is useEffect ?

 

useEffect의 대표적인 유형은 두 가지가 있다.

 

첫번째로 callback 함수만 받는 경우

useEffect(( ) => { 

 //작업...

});

 

컴포넌트가 렌더링 될 때 마다 !! ==>> 콜백 함수가 실행된다.

 

즉, 컴포넌트가 초기화 하면서 처음 렌더링 될때 그리고 다시 렌더링 될 때 콜백함수가 실행된다.

 

다시 렌더링 될 때라하면

 

그렇다. useState로 상태값이 변경될 때 마다 다시 렌더링 된다는 얘기다.

 

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

function App() {
	const [count, setCount] = useState(1);
    const [name, setName] = useState('');
    
    const handleCountUpdate = () => {
    	setCount(count + 1);
    };
    
    const handleInputChange = (e) => {
    	setName(e.target.value);
    };
    
    useEffect(() => {
    	console.log('Rendering...')
    });
    
    return(
    	<div>
            <button onClick={handleCountUpdate}>Update</button>
            <span>count: {count}</span>
            <input type='text' value={name} onChange={handleInputChange}/>
            <span>name: {name}</span>
        </div>
    )
};

 

만약 이런 컴포넌트가 있다고 가정하면

 

button을 누르거나 input에 typing을 하면 매번 상태값이 변경되기 때문에

 

'Rendering...' 이 반복한 만큼 출력될 것이다.

 

두번째 유형은 첫번째 인자는 콜백함수, 두번째 인자는 배열 (Dependency array)을 받는 형태이다.

useEffect(( ) => { 

 //작업...

}, [value]);

 

컴포넌트가 초기화 하면서 처음 렌더링 될때만 실행되고

 

배열 (Dependency array) 안의 요소의 값이 바뀔 때 실행된다.

 

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

function App() {
	const [count, setCount] = useState(1);
    const [name, setName] = useState('');
    
    const handleCountUpdate = () => {
    	setCount(count + 1);
    };
    
    const handleInputChange = (e) => {
    	setName(e.target.value);
    };
    
    useEffect(() => {
    	console.log('count changed...')
    }, [count]);
    
    return(
    	<div>
            <button onClick={handleCountUpdate}>Update</button>
            <span>count: {count}</span>
            <input type='text' value={name} onChange={handleInputChange}/>
            <span>name: {name}</span>
        </div>
    )
};

 

위에서 보여줬던 코드를 다시 복기해보면

 

    useEffect(() => {
    	console.log('count changed...')
    }, [count]);

 

이 부분을 변경해 보았다.

 

dependency array 안에 count 라는 state 값을 인자로 넣어주면

 

마운팅 할 때(처음에 렌더링될 때) 'count changed...' 가 출력되고

 

count 값이 바뀔 때 즉,

 

Update 라는 버튼을 눌렀을 때만

 

'count changed...'가 출력된다.

 

같은 논리로

 

    useEffect(() => {
    	console.log('name changed...')
    }, [name]);

 

dependency array 안에 name 이라는 state 값을 인자로 넣어주면

 

마운팅 할 때(처음에 렌더링될 때) 'name changed...' 가 출력되고

 

name 값이 바뀔 때 즉,

 

input 안에 typing 했을 때만

 

' name changed...'가 출력된다.

 

+ 추가로

useEffect(( ) => { 

 //작업...

}, []);

 

배열안에 아무값이 없다면?

 

컴포넌트가 맨 처음 초기화 하면서 처음 렌더링 될때만 실행된다.

What you can do when you unmount useEffect?

 

아래의 예시를 보자.

import React, { useEffect } from 'react';
import Timer from './component/Timer';

function App () {
    const [showTimer, setShowTimer] = useState(false);
    return(
    	<div>
            {showTimer && <Timer />}
            <button onClick={() => setShowTimer(!showTimer)}>Toggle</button>
        </div>
    )
};

export default App;

 

import React, { useEffect } from 'react';

const Timer = (props) => {
    useEffect(() => {
    	const timer = setInterval(() => {
        	console.log('timer running...');
        }, 1000);
        
        return () => {
        	clearInterval(timer);
            console.log('timer ended');
        };
    
    }, []);
    
    return(
    	<div>
        	<span>timer started, look console</span>
        </div>
    );
};

export default Timer;

 

이렇게  Timer 컴포넌트를 App 에서 button을 눌러서 값이 true or false로 변경될 수 있게 만들고

 

showTimer state 값이 true일때만 mount 되게 하였다,

 

useEffect(() => {
    const timer = setInterval(() => {
        console.log('timer running...');
    }, 1000);

    return () => {
        clearInterval(timer);
        console.log('timer ended');
    };

}, []);

 

이렇게 Timer 컴포넌트에서 

 

useEffect 안의 콜백에서

 

timer를 선언해서 1초에 한번씩 'timer running...' 콘솔창에서 출력이 된다.

 

근데 

 

return () => {
    clearInterval(timer);
    console.log('timer ended');
};

 

위의 return 값을 넣지 않는다면

 

unmount 될 때 즉 App에서 Toggle Timer 버튼을 눌러도 종료가 되지 않고

 

추가로 더 실행이 된다.

 

useEffect 에서 callback 함수부분에서 return 을 넣어줌으로써

 

unmonut 되었을 때 작동할 수 있는 로직이 완성될 수 있다.

 

이 글을 마치며...

 

해당 글은 아래의  별코딩 유튜버님의 영상을 참고하여 제작하였습니다.

 

* 해당 저작물 관련하여 개인적으로 posting permission 받았습니다.

 

이 자리를 빌어 posting permission 주신 별코딩 유튜버님에게 감사를 표합니다.

 

 

https://www.youtube.com/watch?v=kyodvzc5GHU