리액트 useEffect()

필수 hook, useEffect()

useEffect 란?

useEffect() - State 변경에 따른 sideeffect 실행 관리

useEffect(() => {}, []);

 

useEffect는 method으로서 arrow function 과 dependency array를 parameter 로 가집니다.

Arrow function 의 curly brackets 안에는 실행하고자하는 코드를 입력하고 dependency array 에는 useEffect 가 무엇(변수)에 대해 반응할지를 입력해줍니다. Dependency array 에 값이 없더라도 component 가 mount 할 때 useEffect() 는 적어도 한 번 실행 됩니다.

 

import {useState, useEffect} from 'react';

const Counter = () => {
	const [count, setCount] = setState(0);
    
    useEffect(() => {
    	console.log("콘솔 카운트: ", count)
    }, [])
    
    return (
    <div>
    	<div>Count: {count}</div>
        <button onClick={() => setCount(count - 1)}>빼기</button>
        <button onClick={() => setCount(count + 1)}>더하기</button>
    </div>
    )
};

export default Counter;

 

위와 같은 간단한 카운터 component가 있습니다.

useEffect()를 console.log()를 사용하여 테스트하면 component 가 mount 되며 console.log()가 제대로 됨을 확인 할수 있습니다 (console창에 '콘솔 카운트: 0' 이 뜹니다).

그렇지만 위와 같은 코드는 더하기, 빼기 버튼을 아무리 클릭해도 console창에는 '콘솔 카운트: 0' 이후로 변화가 없습니다.

Dependency array가 비어있기 떄문인데요, 

 

    useEffect(() => {
    	console.log("콘솔 카운트: ", count)
    }, [count])

 

위와 같이 useEffect() 에 dependenct array 에 값을 넣어주면 카운터의 버튼 클릭에 따라 콘솔 창에도 count 가 업데이트되는 sideeffect 를 발생 시킵니다.

 

Clean-up function

    useEffect(() => {
    	console.log("콘솔 카운트: ", count)
        return () => {
        	console.log("Clean Up!")
        }
    }, [count])

 

위와 같은 코드를 쓰고 '더하기' 버튼을 클릭하면 콘솔 창에,

콘솔 카운트: 0
Clean Up!
콘솔 카운트: 1

 

Dependency array 안의 값의 상태가 변하면 useEffect hook 은 clean-up function(return) 을 실행하며 스스로 제거, 클린업 합니다. 이후 업데이트 된 값으로 새로 생성됩니다.

 

같은 코드에서 dependenct array 가 비어있는 경우에도 여전히 clean-up function 은 실행되는데, component 가 unmount 되는 경우에 실행됩니다, component 가 unmount 하면 useEffect 가 더 이상 필요 없기 때문입니다. 

 

class component 관점에서 보면, 
console.log("콘솔 카운트: ", count) 는 componentDidMount()

 

return () => {
         console.log("Clean Up!")
        }

는 componentWillUnmount()