React(리액트) - useEffect

 

 

 

 

 

 

 

 

빈배열 일때는 

 

 

1. 타이머 했다면 타이머 정리, 구독을 했다면 구독 정리, 리스너를 등록 했다면 리스너 정리.

 

예제)

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

const UseEffectExample = () => {

    const [name, setName] = useState("");

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

    const handleChangeName = (e) => setName(e.target.value);

    const handleCountUp = () => setCount(count + 1);

     // name이 바뀔 때만 실행

    useEffect(() => {

    console.log("name 렌더링!");

    console.log({ count, name });

    }, [name]);

    // count가 바뀔 때만 실행

    useEffect(() => {

        console.log("count 렌더링!");

        console.log({ count, name });

    }, [count]);

    //렌더링 될때 마다 실행

    useEffect(() => {

        console.log("렌더링 될때 마다");

        console.log({ count, name });

    });

       

    //첫랜더링 한번만 실행

    useEffect(() => {

        console.log("첫랜더링 한번만 실행");

        console.log({ count, name });

    },[]);

    return (

        <div>

            <p>이름입력</p>

            <input type={"text"} value={name} onChange={handleChangeName} />

            <p>카운트 : {count}</p>

            <button onClick={handleCountUp}>카운트 업</button>

        </div>

    );

}

export default UseEffectExample;