React Hook(useEffect)

[useEffect]

• useEffect를 사용하면 컴포넌트를 화면에 그린 후 실행될 함수를 정의

[사용방법]

useEffect는 2개의 매개변수를 가지는데 첫 번째는 컴포넌트 레이아웃 배치와 화면 그리기가 끝난 후 실행될 함수, 두 번째는 의존성 배열

• 첫 번째 인자의 내부는 effect 함수, 첫 번째 인자가 반환하는 함수는 clean-up 함수라고 부른다.

• useEffect는 첫 번째 인자로 주어진 함수를 실행하기 전에 의존성 배열의 원소가 변경됐는지 확인

• 비교는 useState와 동일하게 Object.is 메소드를 사용하고 만약 하나도 변경되지 않았으면 렌더링 시점에선 useEffect를 실행하지 않음

• 하지만 의존성 배열의 원소가 하나라도 변경됐으면 useEffect를 실행

• 의존성 배열을 빈 배열로 설정하면 useEffect의 함수는 컴포넌트를 마운트하는 시점과 언마운트하는 시점에만 실행(예)List - 목록 렌더링)

• useEffect가 함수 컴포넌트 생애주기에 관여하는 부분은 위 그림과 같고, useEffect는 항상 DOM 상태 변경과 레이아웃 배치, 화면 그리기가 모두 완료된 후 실행

• 컴포넌트는 기본적으로 마운트->업데이트(반복)->언마운트의 생애주기를 가진다

• 마운트 상태 : 컴포넌트 구조가 HTML DOM에 존재하는 상태(화면에 보이는 상태), 컴포넌트 DOM 구조나 내용이 변경될 때마다 업데이트 과정

• 언마운트 상태 : 컴포넌트 구조가 HTML DOM에서 제거된 상태(화면에 안 보이는 상태)를 의미.

[effect 함수와 clean-up 함수]

• React 컴포넌트는 매 render 함수를 실행하는 과정에서 그 시점의 컴포넌트 props와 상태를 기반으로 컴포넌트 내부 변수와 함수를 다시 정의하고 계산 -> 이 때 useEffect의 첫 번째 인수도 계산되어 위 그림에서 표현된 시점에 실행