useEffect란?

useState와 비슷하게 생긴 useEffect는 화면에 Component가 렌더링 될 때마다 특정 코드를 실행하게 하는 
React Hook이다. 그러므로 화면에 무조건 바로 보여줘야 되는 코드보다는 조금 늦어도 되는(?) 코드에 주로 사용한다.

ㅁuseEffect는 component가 mount(화면에 나올때), unmount(화면에서 사라질때), update(수정됐을때)
특정 작업을 처리할 수 있다.

출처 :https://www.zipy.ai/blog/using-reacts-useeffect-hook-with-lifecyle-methods

1. ComponentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행

2. ComponentDidUpdate : 리렌더링을 완료 후. 즉 render()가 업데이트 될 때마다 실행

3. ComponentWillUnMount : 컴포넌트를 DOM에서 제거할때 실행

useEffect( function, deps)

-  function : 수행하고자 하는 코드 . return 이 있다면 컴포넌트가 Unmount될때 한번 더 실행.

- deps : 배열 형태, 배열 안에 특정 값을 넣으면 그 지정 값이 업데이트 될때 useEffect 실행.

1. componentDidMount (컴포넌트가 mount 됐을때 -> 첫 등장)

use Effect(()=> {
	console.log('마운트 될때 딱 한번만 실행');
}, []);

2. componentDidUpdate (컴포넌트가 업데이트 될때 특정 props, state가 바뀔때)

useEffect(() =>{
	console.log('렌더링 될때 마다 실행된다.');
});

 

useEffect(() => {
	console.log(age);
    console.log('업데이트 될 때 실행 됨');
}, [age]);
//업데이트와 마운트 될때 둘다 실행

 

3. componentDidUnMount (컴포넌트가 사라질때 )

UseEffect(() => {
	console.log('effect');
    console.log(age);
    return () =>{
    	console.log('cleanup');
        console.log(age);
    };
}, []);