[React] 8. useEffect

1. useEffect

- useEffect : 컴포넌트가 랜더릴될 때를 감지하여 랜더링된 "이후" 실행할 코드를 기술하는 함수.
- 컴포넌트에는 기본적으로 lifeCyle이라는 개념이 있는데, 컴포넌트가 처음 로딩되는 시기를 mount 
- state변경에 의해 컴포넌트가 재랜더링 될때는 update 
- 컴포넌트가 교체/소멸될때는 unmount라고 부른다. useEffect는 mount, update, unmount되는 시점에 각각 끼어들어서 내가 실행하고자 하는 코드를 추가할 수 있다.

 

 

▶ 사용방법

useEffect(function() => {       랜더링이 완료된 "후!!!!!!!!!!!!!!!!!!!!!!!!!!!!!" 실행할 코드       return 컴포넌트가 재랜더링되거나, 소멸할 때 실행할 "함수"     } , [의존성 목록]) // state값들을 배열형태로 넣어줌. 의존성목록에 들어간 state변수의 값이 바뀌면(update)

 

☞ 의존성 목록을 빈배열로 두는 경우 첫 로딩시에만 useEffect함수 내부의 내용이 실행됨
☞ 의존성 목록에 내가 원하는 데이터만 지정하는 경우 해당 데이터가 바뀔 때만 useEffect함수 내부의 내용이 실행됨

 

 

▶ useEffect 테스트

let [count, setCount] = useState(0);     useEffect(function (){         console.log("첫 로딩 업데이트 이후 실행", count);         let time = setTimeout(function (){             console.log(count);             setCount(count+1);         }, 2000);  // 2초가 지나면 콜백함수 실행         return function(){             clearTimeout(time);  // 정상적인 흐름이 되도록         }     })

 

 

 

 

▶ 결과

 

 

☞ 2초마다 실행되는데 제목을 클릭하면 바로 실행되지만, 다시 클릭을 하지않으면 2초마다 재실행되는 것을 확인