React useEffect ( + Cleanup 함수 )

useEffect 는 useState 외에 가장 중요한 리액트 훅이다.

따라서 반드시 확실하게 이해하고 넘어가야 한다.

 

아래와 같이 dependencies 배열 없이 첫번째 인자로 함수만 넘겨줬을 경우,

컴포넌트가 다시 실행될 때마다 해당 함수가 수행된다.

아래 useEffect() 는 모든 컴포넌트 렌더링 주기 이후에 실행되기 때문이다. ( + 컴포넌트가 처음 마운트 된 때 포함 )

useEffect 에서 Dependencies 를 생략할 경우

Key Stroke 입력 할 때마다 EFFECT RUNNING 로그가 찍힘

 

그렇다면, 두번째 인자로 빈 배열 Dependencies 를 넘겨줬을 경우는?

해당 Login 컴포넌트가 처음으로 마운트되고 렌더링 될 때만 실행된다.

useEffect 에서 dependencies 에 빈 배열을 넘겨준 경우

처음 Login 컴포넌트가 렌더링 될 때만 EFFECT RUNNING 이 수행

두번째 인자로 특정 값을 넘겨줬을 경우는?

해당 State 가 변경될 때마다 "EFFECT RUNNING" 로그가 찍힌다.

아래 예시에서는 Password Key Stroke 가 발생할 때마다 찍힘.

enteredPassword State 를 Dependency 로 추가한 경우

Password onChange 발생 할 때마다 수행되는 useEffect

useEffect 에서는 함수를 return 할 수 있는데, 이를 CleanUp 함수라고 한다.

이 클린업 함수는 State 함수(아래 스크린샷의 EFFECT RUNNING 로그) 가 전체적으로 실행되기 전에 실행된다.

첫 번째 렌더링 주기의 경우 클린업 함수가 수행되지 않는다.

CLEANUP 함수를 RETURN 하는 useEffect()

EFFECT CLEANUP 이 EFFECT RUNNING 보다 먼저 발생함.