[React] 라이프사이클 실습(useEffect) 의 호출시기

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

const App2 = (props) => {
    const [ count, setCount ] = useState(1);
    const [ input, setInput ] = useState('');

    useEffect(()=> {
        console.log('랜더링될때마다 useEffect 호출')
    })
    //useEffect에 두번째 인자로 [] 를 남겨주면 마운트 시에만 호출
    useEffect(()=> {
        console.log('처음 마운트 될때만 useEffect가 호출')
    },[])
    useEffect(()=> {
        console.log('배열요소안의 값이 업데이트되면 useEffect 호출')
    },[count])
    const handleCount = () => {
        setCount(count+1);
    }
    const onChange = (e) => {
        setInput(e.target.value)
    }
    return (
        <div>
            <button onClick={handleCount}>수정하기</button>
            <span>count : {count}</span>
            <input onChange={onChange} value={input} />            
        </div>
    );
};

export default App2;

   useEffect(()=> {

        console.log('랜더링될때마다 useEffect 호출')

    })

 

값이 수정될때 항상 표시

1. 수정하기를 누른경우

2. input의 값을 수정한 경우

항상 표시되기 때문에 버퍼링이 생길 수 있기에 마지막에 ,[] 를 추가해사용하도록 한다.

 

    useEffect(()=> {

        console.log('처음 마운트 될때만 useEffect가 호출')

    },[])

제일처음 마운트 딜때만 호출된다. / 한번 호출되고 더이상 호출되지 않음.

 

    useEffect(()=> {

        console.log('배열요소안의 값이 업데이트되면 useEffect 호출')

    },[count])

배열에넣은 count 값이 수정될때만 호출된다. 

버튼을 누를시 실행되는 setCount(count+1) 이 실행될시  count값이 수정되기에 호출