처음 만난 리액트 문서
6.2 Lifecycle에 대해 알아보기
이번에는 리액트 컴포넌트의 lifecycle에 대해서 알아보도록 하겠습니다. 영어 단어 lifecycle은 우리 말로 하면 생명주기라는 뜻을 갖고 있습니다. 사람의 생명주기는 어떻게 되죠? 출생해서 인생을 살다가 늙어서 사망을 하게 되죠. 마찬가지로 리액트 컴포넌트도 이러한 생명주기를 갖고 있습니다. 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있는 것입니다. 아래 그림은 리액트 클래스 컴포넌트의 생명주기를 나타낸 것입니다.
이 그림을 보면 크게 출생, 인생, 사망으로 나뉘는데, 각 과정에서 하단에 초록색으로 표시된 부분들은 각 생명주기에 따라서 호출되는 클래스 컴포넌트의 함수입니다. 이 함수들을 Lifecycle method라고 부르며, 한글로는 생명주기 함수라고 부릅니다. 그럼 이제 생명주기를 하나씩 살펴보겠습니다.
먼저 컴포넌트가 생성되는 시점, 그러니까 사람으로 치면 출생 과정이 있습니다. 이 과정을 Mounting이라고 부르는데, 이때 컴포넌트의 constructor(생성자)가 실행됩니다. 앞에서 본 것처럼 생성자에서는 컴포넌트의 state를 정의하게 됩니다. 그리고 컴포넌트가 렌더링되며, 이후에 componentDidMount()함수가 호출 됩니다.
태어났으면 이제 인생을 살아가야겠죠? 사람은 인생을 살아가는 과정에서 신체적, 정신적으로 변화를 겪게 됩니다. 이처럼 리액트 컴포넌트도 생애주기 동안 변화를 겪으면서 여러번 렌더링 되게 됩니다. 이 과정은 리액트 컴포넌트로 치면 Updating이 되는 과정이라고 할 수 있습니다. Updating과정에서는 컴포넌트의 props가 변경되거나, setState() 함수 호출에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링 됩니다. 그리고 렌더링 이후에 componentDidUpdate()함수가 호출 됩니다.
마지막으로는 사망하는 과정이 있습니다. 사람은 누구나 나이가 들어서 죽게 됩니다. 리액트 컴포넌트도 결국 언젠가는 사망하는 과정을 겪게 되는데, 이 과정을 Unmounting이라고 부릅니다. 그렇다면 언제 컴포넌트가 Unmounting 될까요? 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 Unmounting된다고 볼 수 있습니다. 그리고 이 때 Unmounting 직전에 componentWillUnmount()함수가 호출됩니다.
지금까지 리액트 컴포넌트의 생명주기와 생명주기 함수에 대해 간단하게 살펴보았습니다. 여기서 배운 세 가지 생명주기 함수 이외에도 다른 생명주기 함수들이 존재하지만, 지금은 클래스 컴포넌트를 거의 사용하지 않기 때문에 다루지 않았습니다. 컴포넌트 생명주기에서 우리가 기억해야할 부분은, 컴포넌트가 계속 존재하는 것이 아니라 시간의 흐름에 따라서 생성되고 업데이트 되다가 사라지는 과정이 존재한다는 것입니다. 이것은 비단 클래스 컴포넌트뿐만 아니라, 함수 컴포넌트에도 해당되는 내용입니다. 이 부분을 잘 기억하고 있으면 조금 더 깊게 리액트 컴포넌트를 바라볼 수 있을 것입니다.
마지막 업데이트: 2025년 08월 26일 07시 23분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page