useEffect는?

useEffect는 리액트의 훅 중 하나

클래스 컴포넌트의 라이프사이클 메서드를 함수 컴포넌트에서 사용할 수 있음.

useEffect는 주로 사이드이펙트를 처리하기 위해 사용,

데이터 패칭, 상태 변경, 돔 업데이트 등의 작업을 수행할 수 있습니다. 

 

useEffect의 실행 순서

Component Mounting (컴포넌트 마운트)

useEffect는 컴포넌트가 처음 마운트될 때 실행

컴포넌트가 처음 렌더링되고 나서 호출

클래스 컴포넌트의 componentDidMount와 유사한 역할

예를 들어, 데이터 패칭이 필요한 경우 이 시점에서 수행

 

Component Updating (컴포넌트 업데이트) 

useEffect는 컴포넌트의 상태 값이나 속성 값이 변경될 때마다 실행될 수 있음.

이때 의존성 배열에 어떤 값을 넣어주느냐에 따라 어떤 값이 변경될 때 실행될지를 조절가능.

만약 빈 배열 []을 전달한다면, useEffect가 마운트 될 때 한 번만 실행. 

그러나 의존성 배열이 지정되지 않은 경우,

컴포넌트가 렌더링 될 때마다 실행되며,

클래스 컴넌트의 componentDidUpdate와 유사한 역할을 함.

 

Component Unmounting (컴포넌트 언마운트)

useEffect 개념상 마지막에 반환된 함수 또는 클린업 함수를 포함할 수 있음.

이 함수는 컴포넌트가 언운트되거나, useEffect가 의존성 배열에 따라 재실행되기 전에 됨.

클래스 컴포넌트의 componentWillUnmount와 유사한 역할.