React Lifecycle 제어하기 - useEffect

useEffect 사용 
배열에 있는 값이 하나라도 변화하면, 첫 번째 parameter인 콜백 함수가 다시 수행 된다. 

두 번째 parameter 배열에 변화하는 값을 넣어 놓으면, 콜백 함수가 그 값이 변화할 때마다 계속 수행 되는 것 ! 

 

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

const Lifecycle = () => {

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

useEffect(() => {
    console.log("Mount");
}, []);

useEffect(() => {
    console.log("Update");
})

    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;

 

 

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

const Lifecycle = () => {

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

useEffect(() => {
    console.log("Mount");
}, []);

useEffect(() => {
    console.log("Update");
})

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>
    );
};

export default Lifecycle;

 

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 (
        // isVisible이 true면 뒤에 값을 반환.  
    <div style = {{ padding : 20}}>
        <button onClick = {toggle}>ON/OFF</button>
        {isVisible && <UnmountTest/>} 
    </div>
    );
};

export default Lifecycle;