리액트 생명주기와 useEffect

React 컴포넌트의 생명주기

사람이 태어나고, 성장하고, 죽는 것처럼 React 컴포넌트는 생명주기를 갖는다.

REACT 컴포넌트의 생명주기와 각 시기별 사용할 수 있는 생명주기 메서드

 

바로, " 생성 - 업데이트 - 제거"의 과정이 그것이다.

 

생성될 때 (Mount)

constructor로 정의해놓은 것들이 실행되고 render되면서 mount(생성)된다.

업데이트될 때 (Update)

업데이트는 props나 state가 변경되었을 때 발생한다.

제거될 때 (Unmount)

상위 컴포넌트가 하위 컴포넌트를 더이상 그리지 않을 때, unmount(제거) 된다.

 

(클래스 컴포넌트 기준으로) 모든 컴포넌트는 render 메서드를 갖는다. render 메서드는 웹 컴포넌트를 실제 DOM 요소에 그려주는 역할을 한다. render 메서드는 제거될 때를 말고는 모두 실행되는데, 그 전후에 필요한 사이드 이펙트들을 생명주기 메서드들을 통해 실행시킬 수 있다.

---

자주 사용하는 생명주기 메서드들

위 생명주기 그림에도 나와있듯이, 각 생명주기 시점에 따라 실행할 수 있는 생명주기 메서드들이 다양하다. 이중에서도 자주 사용하는 3개 생명주기 메서드만 자세히 알아보자.

componentDidMount

• 컴포넌트가 모두 구성된 직후에 componentDidMount가 호출된다. 이 메서드는 컴포넌트가 렌더링된 직후에 호출된다. 이 시점에서는 DOM 노드에 접근할 수 있다.
• 이벤트 리스너를 추가하거나 API 호출을 수행하는 등의 작업을 수행하면 효과적이다.

componentDidUpdate

• 컴포넌트가 업데이트된 직후에 componentDidUpdate가 호출된다. 이 메서드는 컴포넌트가 업데이트된 직후에 호출된다. 이 시점에서는 이전의 props와 state를 접근할 수 있으며, 이를 통해 컴포넌트가 업데이트되기 전과 후를 비교하여 필요한 작업을 수행할 수 있다.
• 화면에 출력되는 화면 구성을 변경하고자 할 때 많이 사용한다. 그러나 데이터 변경과 관련한 함수를 클라이언트가 직접 처리하는 경우는 많지 않다.

componentWillUnmount

• 컴포넌트가 제거되기 직전에 componentWillUnmount가 호출된다. 이 메서드는 컴포넌트가 제거되기 직전에 호출된다. 이 시점에서는 컴포넌트가 제거되기 전에 필요한 작업을 수행할 수 있다. 이 메서드는 컴포넌트가 제거되기 직전에 호출되기 때문에, 이벤트 리스너를 제거하거나 네트워크 요청을 취소하는 등의 작업을 수행할 수 있다.
• 컴포넌트의 동작을 위해 사용되었던 메소드들의 리소스를 제거해줄 때 사용한다. 어플리케이션 성능 향상을 위해 사용되는 경우가 많다.

---

함수형 컴포넌트에서의 Effect 훅, useEffect

앞서 언급한 생명주기 메서드들은 클래스형 컴포넌트에서만 사용할 수 있었다. 훅의 등장으로 useEffect를 사용할 수 있게 되면서 함수형 컴포넌트에서도 생명주기 시점에 따른 사이드 이펙트를 실행할 수 있게 되었다.

1. useEffect(callBack); (≒ componentDidMount + componentDidUpdate + componentWillUnmount)

오로지 콜백만 파라미터로 넘겨주는 경우다.

이 경우, 컴포넌트가 생성되고, 업데이트되고 제거되기전에 모두 콜백이 실행된다.

위에서 언급한 자주 쓰이는 생명주기 메서드 3개가 모두 실행된다고 이해하면 된다.

2. useEffect(callBack, []);(≒ componentDidMount)

두번째 파라미터로 빈 array를 넘겨주는 경우이다.

두번째에 오는 array는 dependency array라고 하는데, 여기에 오는 요소들이 변경이 생길때마다 callback을 다시 실행한다.

빈 array이므로 업데이트가 생기지 않으므로, 생성되고 나서 1번만 콜백이 실행된다.

생명주기 메서드의 componentDidMount와 동일하다.

3. useEffect(callBack, [state, props]);(≒ componentDidMount + componentDidUpdate)

dependency array에 요소를 넘겨준 경우이다. state나 props를 넘겨주는데, 처음 컴포넌트가 생성됐을 때 뿐만 아니라

state나 props가 변경되어 컴포넌트가 업데이트 되어야할때도 콜백이 실행된다.

componentDidMount와 componentDidUpdate 메서드를 합쳤다고 생각하면 된다.

4. cleanup function (≒ componentWillUnmount)

이 경우는 예시코드를 통해 확인해보자.

useEffect(()=>{
    exampleAPI.subscribe();
    return(() => exampleAPI.unsubscribe()); // componentWillUnmount
})

 

사이드 이펙트로 어떤 모델을 참조하는 구독 메서드를 실행했다고 가정하자. 이것은 사이드 이펙트이기 때문에 컴포넌트가 제거되어도 구독 자체는 유지가 될 것이다. 사이드 이펙트로 실행한 구독을 다시 해제하지 않으면, 더이상 사용하지 않아 제거된 컴포넌트에서 일어난 구독일지라도 계속해서 외부를 참조하고 있어 불필요한 메모리 누수가 발생할 수 있다. 이때 구독을 해제하는 함수를 return과 함께 useEffect 내에서 처리해주면, 컴포넌트가 제거되기 전에 구독을 해제하고 컴포넌트가 제거될 수 있다. 이렇게 이펙트에서 실행된 함수를 return문과 함께 정리하는 함수를 'cleanup function'이라고 한다. 이 cleanup function이 useEffect 내에서 이뤄지면, 컴포넌트가 제거되기전에 실행되므로 componentWillUnmount와 동일한 시점에 실행된다고 볼 수 있다.

---

참고한 자료들

• 리액트 레거시 공식문서 - State and Lifecycle
• react-lifecycle-methods-diagram
• 동빈나 유튜브
• 리액트 한글 번역 공식문서
• [React] 리액트의 생명주기와 Hook
• [[React] 리액트의 생명주기와 Hook

컴포넌트 기반 라이브러리인 react에서, 컴포넌트가 가지는 생명주기와, 함수형 컴포넌트에서 활용하는 Hook 중 useEffect에 대해서 알아보았습니다.

velog.io](https://velog.io/@sukong/REACT-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%EC%99%80-useEffect-Hook#-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%84-%EB%8F%84%EC%9E%85%ED%95%9C-%EB%AA%A9%EC%A0%81)

[State and Lifecycle – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org](https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html)

[React Lifecycle Methods diagram

Fully interactive and accessible React Lifecycle Methods diagram.

projects.wojtekmaj.pl](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

[반응형 effects의 생명주기 – React

The library for web and native user interfaces

ko.react.dev](https://ko.react.dev/learn/lifecycle-of-reactive-effects)