useEffect === componentWillUnMount || componentDidMount || componentDidUpdate

 

 

useEffect()는 componentWillUnMount, componentDidMount, componentDidUpdate의 속성을 모두 가지고 있다

component가 처음 렌더링되면 useEffect()의 첫번째 인자로 들어가는 함수가 didMount에 해당하여 바로 실행된다

useEffect()의 두번째 인자에는 의존성이 들어가는데, 의존성은 처음 페이지가 렌더링 된 후 상태가 변화하는 값을 의미하며 배열 형태로 입력한다

의존성이 있다면, 해당 상태가 변화할 때마다 useEffect()의 첫번째 인자가 didUpdate로서 실행되고,

의존성이 빈배열이라면 첫번째 인자는 다시 실행되지 않는다

 

두번째 인자가 아예 비어 있다면 첫번째 인자는 매번 업데이트 된다(따라서 빈배열이라도 꼭 넣을 것)

마지막으로 useEffect의 willUnmount는 useEffect 자체가 실행되고 난 후 반환되는 함수에 해당한다
willUnmount는 해당 페이지를 벗어나는 등 상태를 지울 필요가 있을 때 이벤트리스너를 지워주는 역할을 한다

 

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

/* useRef === document.getElementById */

const useClick = onClick => {
    const element = useRef();

    useEffect(() => {

        // didMount || didUpdate(dep 있을 때는 didUpdate만 호출)
        // sayHello를 가진 Component인 UseClick이 Mount 되었을 때 click 이벤트 추가해주기
        if (element.current) {
            element.current.addEventListener("click", onClick)
        }

        // willUnmount
        // componentWillUnmount 될 때 click 이벤트 삭제해주기
        // useEffect()에게 반환되는 함수는 willUnmount 일때 호출된다
        return () => {
            if (element.current) {
                element.current.removeEventListener("click", onClick)
            }
        }

    }, [])

    return element;
}

const UseClick = () => {

    const sayHello = () => console.log("Hello");
    const element = useClick(sayHello);

    return (
        <div>
            <span>useClick</span>
            <button ref={element}>Hello</button>
        </div>
    )
}

export default UseClick;