React Hooks에서 제공하는 UseEffect

1. useEffect란?

useEffect?

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 정할 수 있음. React는 우리가 작성한 함수를 기억했다가 DOM 업데이트 수행 이후 이를 불러내 실행함.

useEffect를 컴포넌트 안에서 부르면?

useEffect를 컴포넌트 내부에 두어 effect를 통해 앞전에 나온 state 변수 혹은 props에 접근할 수 있게 됨.

2. useEffect의 구조

import React, { useState, useEffect } from 'react';
function Exampe(){
	const [count, setCount] = useState(0);
    
    useEffect(() => {
    	console.log(`${count} times clicked`);
    })
    
    return(
    	<p>{count} times clicked!</p>
    	<button onClick = {() => setCount(count+1)}>
	        Increase
        </button>
    )
}

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 하는 Hook임.

위 코드 예시를 보면 버튼을 클릭했을때 count의 값이 바뀌며 다시 렌더링 되기 때문에 버튼을 클릭할 때마다 useEffect 안에 있는 console이 찍히게 됨.

3. 예시

처음 렌더링에만 실행하고 싶을 때

import React, { useState, useEffect } from 'react';
function Exampe(){
	const [count, setCount] = useState(0);
    
    // 함수의 두번째 파라미터에 빈 배열 작성
    useEffect(() => {
    	console.log(`${count} times clicked`);
    },[])
    
    return(
    	<p>{count} times clicked!</p>
    	<button onClick = {() => setCount(count+1)}>
	        Increase
        </button>
    )
}

가장 처음에 렌더링 될 때만 실행하고 그 이후에 실행할 필요가 없다면 함수의 두번째 파라미터로 빈 배열을 넣어주면 됨.

특정 값이 업데이트 될 때만 실행하고 싶을 때

import React, { useState, useEffect } from 'react';
function Exampe(){
	const [count, setCount] = useState(0);
    
    // 함수의 두번째 파라미터에 빈 배열 작성
    useEffect(() => {
    	console.log(`${count} times clicked`);
    },[count])
    
    return(
    	<p>{count} times clicked!</p>
    	<button onClick = {() => setCount(count+1)}>
	        Increase
        </button>
        ...생략
    )
}

특정 값이 변경될 때만 호출하게 하고 싶을 때 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨.

배열 안에 useState를 통해 관리하고 있는 상태 값을 넣어줘도 되고, props로 전달받은 값을 넣어주어도 됨.

실제로 여러 값들이 존재하는 컴포넌트에서 특정 값이 변할때만 useEffect를 호출하기 위해 꼭 알아둬야함.

뒷정리 하기

import React, { useState, useEffect } from 'react';
function Exampe(){
	const [count, setCount] = useState(0);
    
    // 함수의 두번째 파라미터에 빈 배열 작성
    useEffect(() => {
    	consoloe.log('effect');
    	console.log(`${count} times clicked`);
        
        return () => {
    		consoloe.log('cleanup');
	    	console.log(`${count} times clicked`);
        }
    })
    
    return(
    	<p>{count} times clicked!</p>
    	<button onClick = {() => setCount(count+1)}>
	        Increase
        </button>
        ...생략
    )
}

컴포넌트가 언마운트 되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하려면 useEffect에서 cleanup 함수를 반환해주어야 함.

컴포넌트가 나타날 때는 콘솔에 effect가, 사라질 때는 cleanup이 보여지게 됨.

만약 언마운트 될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두번째 파라미터에 빈 배열을 넣으면 됨.