useEffect의 life cycle

useEffect는 언제 실행되고 언제 실행이 멈출까.

useEffect의 life cycle에 대해서 알아보았다.

 

모든 React 컴포넌트는 다음과 같은 생명주기를 가진다.

• 컴포넌트는 화면에 추가될 때 mount된다.
• 컴포넌트는 새로운 props나 state를 받았을 때 업데이트된다.
• 컴포넌트는 화면에서 제거되었을 때 unmount된다.

useEffect는 컴포넌트 내부에 존재하기에 위와 같은 생명주기를 따라간다고 생각할 수 있으나, 완전 별개의 생명주기를 가진다고 봐야 한다.

 

useEffect(() => {
	// 동기화 시작
	return () => {
    	// 동기화 해제
    }
})

 

useEffect는 기본적으로는 동기화를 위해서 사용되는 hook이다.

예를 들면, 실제 데이터와 화면 사이에 불일치가 발생하였을 때, useEffect를 사용하여 이를 해결할 수 있다.

맨 처음 컴포넌트가 마운트되면 동기화가 필요하고, 언마운트되면 동기화가 해제되어야 한다.

그리고 useEffect는 또한 그 사이에 사용자의 상호작용 등 다양한 요인으로 인해서 동기화가 필요한 경우 동작한다.

 

useEffect(() => {
	...
}, [time]);

 

위와 같이 두 번째 인자에 time이라는 상태값이 주어졌을 때, useEffect는 time값이 변경될 때 마다 실행된다.

즉, useEffect의 실행주기는 useEffect의 두 번째 인자인 배열 내부의 상태값의 변화에 따른다.

 

때문에 만약, useEffect가 다음과 같이 작성된다면 무한히 useEffect가 실행되는 오류가 발생할 수도 있다.

useEffect(() => {
	setTime(time + 1);
}, [time]);

time이 증가하면 useEffect가 실행되는데, useEffect 내부에서 time을 증가시키므로 무한히 이 사이클이 반복되는 것이다.

 

즉, useEffect의 실행 사이클은 지극히 사용자의 상태 관리와 연관되어 있으므로, 렌더링이 최소화되도록 적절히 useEffect를 컨트롤하는 것이 중요하다.

 

 

https://react.dev/learn/lifecycle-of-reactive-effects

Lifecycle of Reactive Effects – React