React component Life Cycle, useEffect Cleanup

Life Cycle

리액트 컴포넌트에는 라이프사이클(Life Cycle)이 존재합니다.  

리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 한다던지 ,컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있습니다. 이때 리액트 컴포넌트 라이프사이클(Life Cycle) 관련 함수들을 이용하면 이를 처리할 수 있습니다. 컴포넌트 라이프 사이클 함수 종류는 아래와 같습니다.

 

컴포넌트 Life Cycle Life Method 종류

 

▼ will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수이고 did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수입니다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount 3가지로 분류됩니다. 

 

1. Mount

마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 함수는 다음과 같습니다.

 

마운트 (Mount) 메소드 호출 순서

■ constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수입니다. 앞 포스팅에서 배웠던 것처럼 state의 초기값을 지정할 때 사용합니다. 

■ getDerivedStateFromProps : props와 state 값을 동기화할 때 사용하는 함수로 리액트 v16.3 이후에 만들어진 함수입니다.

■ render : 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환합니다. 

■ componentDidMount : 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수입니다. 

2. 업데이트

컴포넌트가 업데이트 될 때 실행되는 함수들을 살펴보겠습니다. 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우가 있습니다.

 

Component Update 시점에 호출되는 함수들

■ getDerivedStateFromProps : 마운트(Mount) 과정에서도 호출되었던 함수입니다.

■ shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 함수입니다. true를 반환하면 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하며 false를 반환할경우 리렌더링을 하지 않고 아래 함수도 실행되지 않습니다. 

■ render : 새로운 값을 사용하여 View를 리렌더링합니다.

■ getSnapshotBeforeUpdate : 변경된 요소에 대하여 DOM 객체에 반영하기 직전에 호출되는 함수입니다.

■ ComponentDidUpdate : 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수입니다. 

 

3. 언마운트 (UnMount)

컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 합니다. 호출되는 함수는 하나로 componentWillUnmount 함수입니다. 해당 컴포넌트가 제거되기 직전에 호출됩니다.

 

 

 

---

클린업(cleanup)은 뭐지?

.본질적으로 클린업의 목적은 구독과 같은 이펙트를 “되돌리는” 것입니다.

 

리액트는 브라우저가 페인트 하고 -> 난 뒤에야 이펙트를 실행합니다. 이렇게 하여 대부분의 이펙트가 스크린 업데이트를 가로막지 않기 때문에 앱을 빠르게 만들어줍니다. 마찬가지로 이펙트의 클린업도 미뤄집니다. 이전 이펙트는 새 prop과 함께 리랜더링 되고 난 뒤에 클린업됩니다.

리액트가 {id: 20} 을 가지고 UI를 랜더링한다.
브라우저가 실제 그리기를 한다. 화면 상에서 {id: 20} 이 반영된 UI를 볼 수 있다.
리액트는 {id: 10} 에 대한 이펙트를 클린업한다.
리액트가 {id: 20} 에 대한 이펙트를 실행한다.
이상하게 느낄 수 있습니다. 그런데 어떻게 prop이 {id: 20} 으로 바뀌고 나서도 이전 이펙트의 클린업이 여전히 예전 값인 {id: 10} 을 “보는” 걸까요?

 

컴포넌트가 랜더링 안에 있는 모든 함수는 (이벤트 핸들러, 이펙트, 타임아웃이나 그 안에서 호출되는 API 등) 랜더가 호출될 때 정의된 props와 state 값을 잡아둔다.

이제 답이 명확해졌네요! 어찌되었건 이펙트의 클린업은 “최신” prop을 읽지 않습니다. 클린업이 정의된 시점의 랜더링에 있던 값을 읽는 것입니다.

Using the Effect Hook – React

 

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps [] 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.

주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다.

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약
  
  

그리고 언마운트 시에 하는 작업들은 다음과 같은 사항이 있습니다.

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

. deps 에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이

됩니다. deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 됩니다.

---

 

 

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 이런 기능들(operations)을 side effect(혹은 effect)라 부르는 것이 익숙하지 않을 수도 있지만, 아마도 이전에 만들었던 컴포넌에서 기능들을 구현해보았을 것입니다.

팁

React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

React 컴포넌트에는 일반적으로 두 종류의 side effects가 있습니다. 정리(clean-up)가 필요한 것과 그렇지 않은 것. 이 둘을 어떻게 구분해야 할지 자세하게 알아봅시다.

 

정리(Clean-up)를 이용하지 않는 Effects

React가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있습니다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우들입니다. 이러한 예들은 실행 이후 신경 쓸 것이 없기 때문입니다. 

 

정리(clean-up)를 이용하는 Effects

정리(clean-up)가 필요한 effect도 있습니다. 외부 데이터에 구독(subscription)을 설정해야 하는 경우를 생각해보겠습니다. 이런 경우에 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요합니다. 

구독(subscription)의 추가와 제거를 위한 코드는 결합도가 높기 때문에 useEffect는 이를 함께 다루도록 고안되었습니다. effect가 함수를 반환하면 React는 그 함수를 정리가 필요한 때에 실행시킬 것입니다.

 

 

componentDidMount 메서드에서 등록한 timeout, interval, eventListener 같은게 남아있을 수 있기때문에 unmount가 되기전에 remove를 해주는겁니다.
그런게 남아있으면 앱 성능에 영향을 미칠 수 있겠죠?

 

 

 

참조: https://lktprogrammer.tistory.com/130,

https://react.vlpt.us/basic/16-useEffect.html,      

https://ko.reactjs.org/docs/hooks-effect.html,

https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko#%EA%B7%B8%EB%9F%AC%EB%A9%B4-%ED%81%B4%EB%A6%B0%EC%97%85cleanup%EC%9D%80-%EB%AD%90%EC%A7%80

 

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook

 

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook