useEffect

useEffect란?

컴포넌트가 렌더링 . 될때마다 특정 작업을 실행할 수 있도록 하는 Hook

이벤트 핸들러와 비슷함! 다만, 이벤트 핸들러는 사용자가 특정 행위를 했을 때 실행된다면, useEffect는 렌더링 이후 실행되고, 특정 조건을 만족하면 실행됨!

useEffect가 실행되는 시점은 컴포넌트가 렌더링된 이후임!

useEffect(function, deps)

1. 컴포넌트가 화면에 가장 처음 렌더링 될 때 한번만 실행: deps 위치에 빈 배열 넣기

useEffect(()=> { console.log('컴포넌트가 화면에 처음 렌더링 될 때 실행'); }, [])

• 배열 생략시 리렌더링 될 때 마다 실행

2. 컴포넌트가 업데이트 될 때 (특정 props, state가 바뀔 때)
   특정 값이 업데이트 될 때 실행하고 싶으면 deps의 위치의 배열 안에 검사하고 싶은 값 넣기

useEffect(()=> { console.log('업데이트 될 때 실행'); }, [name]);

• 업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행됨. 업데이트 시에만 실행시키고 싶으면

const mounted = useRef(false);
useEffect(()=> { 
	if(!mounted.current) {
    	mounted.current = true;
        } else {
        	console.log(name);
            console.log("업데이트 될 때 실행");
            }, 
          }, [name]);