[React] useEffect hook

UseEffect

 

class 컴포넌트에 사용하는 Lifecycle hook처럼

class 컴포넌트를 사용하지 않아도

componentDidMount(),

componentWillUnmount(),

componentDidUpdate() 와 같은 기능을 사용할 수 있게 만들어주는 hook이다.

 

Effect Hook을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

 

 

기본 사용법

useEffect(() => {
	
});

useEffect 안에 코드를 적으면 컴포넌트가 mount되었을 때와 이 후 update될 때 마다 실행된다.

 

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

function Example(){
    const [welcome, setWelcome] = useState(false);

    useEffect( () =>{
        setWelcome(true);
    });
    
    return(
        <div>
            { welcome ? <h1>Welcome</h1> : null }
        </div>
    )
}

예를들어 welcome이 true일 때 <h1>이 보여지게 짠 코드이다.

default값은 false지만 useEffect에서 true로 설정하여 브라우저에서는 Welcome이 노출되는 것을 확인할 수 있다.

 

하지만 이렇게 설정하면 컴포넌트 안에서 이루어지는 모든 update에서도 해당 useEffect가 실행이 된다.

 

특정 State가 Update될 때만 실행하기.

useEffect( ()=>{
	
}, [실행 조건]);

useEffect는 첫번째 인자로 콜백함수, 두번째 인자로는 실행 조건을 입력받는데,

이렇게 뒤에 []대괄호 안에 조건을 넣어주면 특정 state가 변경 될 때만 실행이 된다.
* 해당 코드는 state를 선언한 코드 아래에 넣어주어야 함.

state를 복수로 입력하고 싶을 땐  [,] 를 사용하여 추가 가능.

 

  const hello = () => console.log('Hello');
  useEffect(hello, [실행 조건]);

위와 같이 같단하게 요청 할 수도 있다.

 

Mount시 1번만 실행

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

위와 같이 [] 빈칸으로 입력 시 해당 UseEffec안의 코드가 컴포넌트 로드 시에 한번만 실행된다.

 

 

Unmount시 실행 (컴포넌트를 벗어 났을 때)

useEffect(()=>{
   return function unMount() { 코드 작성 }
});

useEffect 안에서 함수 하나를 return 해 주면
컴포넌트가 사라질 때 코드를 실행시킬 수 있다.

함수명은 마음대로 설정할 수 있다.

 

 

*useEffect return활용

 

function Example(){
    const [welcome, setWelcome] = useState(true);

    useEffect( () =>{
        let welcomePopup = setTimeout(()=>{
            setWelcome(false);
        }, 3000);

        return ()=>{
            clearTimeout(welcomePopup);
        }
    },[]);
    
    return(
        <div>
            { welcome ? <h1>Welcome</h1> : null }
        </div>
    )
}

setTimeout을 사용하여 페이지 mount 후 3초 뒤에 welcome이 없어지는 코드를 작성했다.

하지만 3초 전에 페이지 이동을 하거나 등 변경 사항시에 에러가 생길 수 있는데

return을 이용하여 unmount시에 clearTimeout을 사용하여 초기화를 해 주었다.

이와 같이 페이지 이동시 초기화 및 다른 설정을 해주어야 하는 것들에 대해 응용하여 사용하면 될 것 같다.

 

 

좀 더 자세한 것은 아래의 링크

 

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React