React - useEffect

useEffect Hook은 side effect를 수행한다.

side effect란?
데이터 가져오기, 구독(subscription) 설정, 수동으로 컴포넌트의 DOM을 수정하는 이 모든 것

useEffect 특징

1. 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러낸다.
2. 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다.(조건부 effect 발생도 가능)

사용방법

useEffect(didUpdate);

useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행된다.

사용 예제

아래의 예제는 최초 1회 useEffect가 작동되며 텍스트를 입력할 때마다 조건부 effect가 실행되고,
최초 1회만 실행되는 2가지의 예제이다. 조건부 effect의 경우 text state가 변경될때마다 실행된다.

useEffect Clean-up

clean-up은 메모리 누수 방지를 위해 사용하며, 이는 컴포넌트가 해제될 때(사라질 때) 작동한다.
아래는 useEffect의 clean-up의 작동 예제로 console 창을 확인해야합니다.

Home에 있을때 useEffect가 작동되며
Detail을 누르면 Home 컴포넌트가 사라지면서 clean-up이 발생한다.