useEffect

useEffect의 경우 side effect를 수행하기 위해 만든 함수이다. SwiftUI로 치면 onAppear, onDisappear, onChange를 합친 기능이라고 보면 된다.

첫번째 인자로 함수를 전달한다. 중요한 것은 두번째 인자인데 두번째 인자를 전달하지 않으면 해당 함수는 리랜더링 될 때마다 실행된다. 두번째 인자로 빈 배열을 전달하게 되면 함수를 처음에 mount될 때만 실행된다. (onAppear) 다시 두번째 인자에 특정한 변수를 전달하면 해당 변수가 바뀔때 마다 실행된다. (onChange)

그렇다면 onDisappear는 어떻게 구현할 수 있을까? onDisappear는 첫번째 인자로 전달하는 함수의 리턴값으로 dismount될 때 실행할 함수를 전달하면 된다. 그렇다면 두번째 인자에 특정한 변수를 전달한 경우, 함수의 리턴값을 전달하면 언제 실행될까? 그 함수는 onChange가 실행되기 전에 실행된다.

export default function BlogComponent() {
    const [num, setNum] = useState(0);
    const handleClick = () => {
        setNum((prev) => prev + 1);
    };
    const onAppear = () => {
        console.log("onAppear");
    };
    const onDisappear = () => {
        console.log("onDisappear");
    };
    const onChange = () => {
        console.log("onChange");
    };
    const beforeChange = () => {
        console.log("beforeChange");
    };

    useEffect(() => {
        onAppear();
        return onDisappear;
    }, []);

    useEffect(() => {
        onChange();
        return beforeChange;
    }, [num]);

    return (
        <>
            <p>{num}</p>
            <button onClick={handleClick}>더하기</button>
        </>
    );
}