[react web] Hook 기초_useEffect

 

0. 들어가면서

 사실 이 부분은 쉽게 이해하기 어렵다. 그리고 가장 잘 정리 된 곳은 공식문서이다.

 

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

Using the Effect Hook – React

 

이 블로그는 자세히 알려주지 않는다. 처음 배우는 사람들이 쉽게 이해할 수 있도록 다 덜어낸 정보를 전달한다. 여기서 개념을 잡고 공식문서를 꼭 읽어보기 바란다.

 

 

 

 

1. 개념

useEffect는 useState에 연결되므로 아래의 코드에서 이어서 설명하겠다. 1분이면 보고 올 수 있다.

 

[Web/React] - [react web] Hook 기초_useState

 

useEffect는 총 4가지로 쓰인다.

아래의 내용 중에 1.2와 1.3이 많이 쓰인다.

 

 

 

1.1 항상 실행

 처음 시작, 화면 변경 시 실행된다. 거의 안쓴다.

 

    useEffect(()=> {
        console.log("1.1 항상실행")
    })

 

 

1.2 처음만 실행

F5로 새로고침하거나 처음 렌더 시 실행된다. 보통 fetch나 axios를 통해 데이터를 API를 받아오는 경우 여기에 많이 적게 된다.

 

    useEffect(()=> {
        console.log("1.2 처음만 실행")
    }, [])

 

 

1.3 업데이트 시 실행

처음 실행되고, useState가 변경 시 실행된다. 아래의 경우에는 hanpy가 변경 시 실행된다.

 

    useEffect(()=> {
        console.log("1.3 업데이트 시 실행")
    }, [hanpy])

 

 

1.4 cleanup

화면 변경 시 ( 정확히는 기존 component가 변경 전 없어 질 때 ) settimeout 같은 실행이 예약된 비동기 함수가 실행되는 경우를 막아준다.

예를들어 버튼을 누른 후 3초 후에 A 화면이 변경되게 만들었다. 그런데 1초 후에 다른 버튼을 눌러서 B화면으로 넘어갔다고 하더라도, 3초가 지나면 A화면으로 넘어가게 된다. 이러한 것을 막기 위해 쓰는 것이 cleanup 함수이다. 아래와 같이 return을 하고 cleartimeout을 실행 해 주면, 화면이 변경 될 시 기존에 비동기 된 settimeout을 무효화 시킨다. 

 

    useEffect(()=> {
        return () => {
            console.log("1.4 cleanup")
        }
    }, [hanpy])

 

 

 

2. 실행 순서

사실 실행순서를 알아보자. 아래의 코드를 추가해보자.

 

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

const HookComponent = () => {
    const [hanpy, setHanpy] = useState(0);
    const handleTest = () => {
        setHanpy(hanpy+1)
    }

    useEffect(()=> {
        console.log("1.1 항상실행")
    })

    useEffect(()=> {
        console.log("1.2 처음만 실행")
    }, [])

    useEffect(()=> {
        console.log("1.3 업데이트 시 실행")
    }, [hanpy])

    useEffect(()=> {
        return () => {
            console.log("1.4 cleanup")
        }
    }, [hanpy])


    return (
        <>
            <p>
                HookComponent 파일
            </p>
            <button onClick={handleTest}>{hanpy}</button>
        </>
    )
}

export default HookComponent;

 

 

처음 F5를 누르면 아래와 같이 실행된다.

 

 

1.1, 1.2, 1.3 전부 처음 실행 시 실행되는 것을 알 수 있다.

 

 

 

그렇다면 button을 누르면 어떻게 될까?

 

 

우선은 버튼을 누르면 화면이 변경된다. 그러면 기존에 있던 것들이 cleanup해주기 위해 1.4가 실행된다. 그리고 1.1은 항상 실행 되고, 1.3은 hanpy의 값이 변경 되는 순간 실행이 된것을 알 수 있다.

 

 

 

 

 

좀 더 많은 부분은 수많은 실습을 통해 알아보자.