설명

Lifecycle.js

mount, update에 대한 useEffect테스트

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

const LifeCycle = ()=>{
    const [count,setCount] = useState(0);
    const [text,setText] = useState("");

    **// component가 mount된 시점에만 작동함 (ex. 페이지 접속 및 새로고침?)
    // count 올려봐도 작동안됨 (mount 된 시점에 실행 시키고 싶을 때 써라)**
    useEffect(()=>{
        console.log("Mount!")
    }, []);

    **// dependencies 없이 하면 페이지 rerender 될때 실행된다.(useState 사용시)
    // component가 업데이트되는 시점에 함수 실행시키고 싶을 때 써라**
    useEffect(()=>{
        console.log("Update!");
    });

    **// 해당 지정한 dependecies가 변동이 있을 때만 실행된다.**
    useEffect(()=>{
        console.log(`count is update : ${count}`)
        if(count > 5){
            alert("count가 5를 넘었습니다 따라서 1로 초기화됩니다.")
            setCount(1);
        }
    }, [count]);

    useEffect(()=>{
        console.log(`text is update : ${text}`)
    }, [text])

    return <div style={{ padding:20}}>
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)}/>
        </div>
    </div>;
}

export default LifeCycle;

Untitled

unmount일때 확인

→ useEffect의 return 란 부분이 unmount 된 시점에 실행됨

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

const UnmountTest = () =>{
    useEffect(()=>{
        console.log("Mount!")

        return ()=>{
            // Unmount 시점에 실행되게 됨
            console.log("Unmount!");
        }
    },[])

    return <div>Unmount Testing Component</div>
}

const LifeCycle = ()=>{
    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => setIsVisible(!isVisible);

    return <div style={{ padding:20}}>
        <button onClick={toggle}>ON/OFF</button>
        {isVisible && <UnmountTest/>} {/*단락회로 평가 이용해서 UnmountTest 실행 여부정함*/}
    </div>;
}

export default LifeCycle

mount가 되면 해당 로그를 출력하고

Untitled

Untitled

Unmount가 되면 해당 로그가 출력되는 것을 확인할 수 있다.

Untitled

Untitled