컴포넌트의 생명주기(lifecycle)

최종 수정 : 2024-06-17

컴포넌트의 생명주기(lifecycle)

리액트에서 컴포넌트를 생성하고 렌더링하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명주기(lifecycle)이라고 표현한다.

 

# 라이프 사이클을 공부해야 하는 이유

동작을 예측가능하게 만든다.

리액트 컴포넌트의 라이프사이클

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 이는 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사잘 때 끝난다. 라이프사이클 메서드를 통해 컴포넌트가 처음 렌더링할 때 보여주는 작업을 하거나, 컴포넌트의 값을 업데이트 하거나, 불필요한 업데이트를 방지하는 것을 수행할 수 있다.

 

라이프사이클 메서드의 종류는 총 9가지 이다.. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. 크게 마운트, 업데이트, 언마운트 카테고리로 나뉜다.

 

마운트(Mount)

리액트 컴포넌트는 가상 ODM 객체 형태로 생성되어 어떤 시점에 물리 DOM 트리의 멤버 객체가 되며, 이 가정에서 렌더링이 일어난다. 이 시점은 컴포넌트가 마운트(mount)되었다고 표현한다. 즉, 가상 DOM 객체가 물리 DOM 객체로 바뀌는 시점을 마운트라고 한다.

 

DOM이 생성되고 웹 브라우저상에서 나타나는 것을 말한다.

"A 컴포넌트가 Mount 되었다!" ==> A 컴포넌트가 화면에 처음으로 렌더링 됐다.

ex) 서버에서 데이터를 불러오는 작업

 

constructor

getDerivedStateFromProps

render

componentDidMount

 

컴포넌트의 constructor(생성자)가 실행됩니다. 생성자에서는 컴포넌트의 state를 정의하게 된다. 또한 컴포넌트가 렌더링되며 이후에 componentDidMount() 함수가 호출된다.

 

 

업데이트(Update)

"A 컴포넌트가 Update 되었다!" ==> A 컴포넌트가 리렌더링 됐다.

ex) 어떤 값이 변경되었는지 콘솔에 출력

 

getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

 

업데이트 과정에서는 컴포넌트의 props가 변경되거나 setState() 함수 호출로 인해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 재렌더링된다. 그리고 렌더링 이후에 componentDidUpdate() 함수가 호출된다.

 

언마운트(UnMount)

컴포넌트가 생성되고 마운트되어 웹 페이지가 나타난 후 어떤 시점이 되면 컴포넌트는 소멸한다. 컴포넌트가 물리 DOM 객체로 있다가 소멸하는 것을 언마운트(unmount)라고 한다. 클래스 컴포넌트가 componentWillInmount() 메서드를 구현하고 있으면 언마운트가 일어나기 직전에 이 메소드를 호출해 준다.

 

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 말한다.

"A 컴포넌트가 UnMount 되었다!" ==> A 컴포넌트가 화면에서 사라졌다.

ex) 컴포넌트가 사용하던 메모리 정리

 

componentWillUnmount

 

 

---

참고 자료

소플의 처음 만난 리액트(p.183-184)

리액트 모던 웹 개발 with 타입스크립트 (p.317-

리액트를 다루는 기술 (p.172-178 정리중)

모던 리액트 (p.149-162 공부중)

 

한 입 크기로 잘라먹는 리액트

https://www.inflearn.com/course/lecture?courseSlug=%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8&unitId=103529