[React] Lifecycle, useEffect

1. Lifecycle

1. 컴포넌트 생성(mount)

2. 컴포넌트 업데이트, 재렌더링(update)

3. 컴포넌트 제거(unmount)

 

Hook을 이용하여, 각각의 라이프사이클 단계에서 함수를 실행시킬 수 있음

 - Line 2 : useEffect 임포트

 - Line 6 : useEffect() 내에 컴포넌트가 mount 혹은 update 됐을 때 실행시킬 함수 넣어주기

 

 => 해당 컴포넌트가 mount 되거나 update 될 때, 브라우저의 콘솔창에 "하위!" 가 출력

 

1-1. useEffect

 - useEffect 안에 적어놓은 코드는 컴포넌트의 html이 모두 렌더링 된 후에 실행

 - 따라서 연산이 오래걸리는 작업들을 useEffect 안에 넣어두면, 일단 html 요소는 화면에 렌더링 된 후 해당 연산을 수행

1-1-1. dependency array

 - dependency array 내에 변수를 지정해두면, 해당 컴포넌트가 mount 됐을 때와 해당 변수가 update 됐을 때 useEffect 내 함수를 실행

 - 위 예제에서는 컴포넌트가 mount 됐을 때, 그리고 count 변수의 값이 변했을 때 setTimeout 함수를 실행

 

 - dependency array를 비워둔 것과 아예 작성하지 않은 것은 다름

 - 비워둔 것 : 해당 컴포넌트가 mount 됐을 때 1회만 실행

 - 아예 [ ] 을 작성해두지 않은 것 : 해당 컴포넌트가 mount 됐을 때, 컴포넌트 내 어떤 것이든 update 됐을 때 실행

1-1-2. cleanup function

 - useEffect 내 함수가 실행되기 전에 실행되는 함수

 - useEffect() 내 return 문에 작성

 - mount 시에는 동작하지 않으며, update 혹은 unmount 시 동작

 - 타이머 제거, socket 연결 요청 제거, ajax요청 중단 등에 주로 사용

 - Line 6 : clearTimeout 함수를 setTimeout 함수가 실행되기 이전에 실행