생명주기(Lifecycle)라는 개념의 도입

맷이 제기한 문제는 리액트가 반드시 넘어야 할 산이었다. 컴포넌트가 단순히 화면에 무엇을 그릴지만 정의하는 것을 넘어, 자신의 존재 기간 동안 외부 세계와 상호작용하기 시작하면서 필연적으로 발생하는 문제였다.

조던 워크는 화이트보드로 걸어가, 컴포넌트의 삶을 하나의 선으로 그렸다.

생성 (Mounting) → 존재 (Updating) → 소멸 (Unmounting)

“모든 컴포넌트는 이와 같은 생애를 살아갑니다.” 조던이 말했다. “처음 세상에 태어나 실제 DOM에 부착되는 ‘생성’의 단계가 있고, props나 state의 변화에 따라 화면을 계속 갱신하며 살아가는 ‘존재’의 단계가 있습니다. 그리고 마지막으로, 페이지 이동 등으로 인해 DOM에서 제거되는 ‘소멸’의 단계를 맞이하죠.”

그는 이 세 가지 주요 단계 사이사이에, 개발자가 끼어들어 자신만의 코드를 실행할 수 있는 ‘갈고리(Hook)’ 지점을 만들어야 한다고 설명했다.

“리액트가 컴포넌트의 삶을 진행시키는 과정에서, 특정 시점에 도달할 때마다 우리에게 신호를 보내주는 겁니다. 우리는 그 신호를 받아서 약속된 이름의 메서드를 실행할 수 있죠. 저는 이 전체 과정을 ‘생명주기(Lifecycle)’라고 부르고 싶습니다.”

‘생명주기’.
그 단어는 컴포넌트가 더 이상 무생물의 코드 조각이 아니라, 자신만의 삶의 단계를 가진 유기적인 존재임을 암시했다.

조던은 컴포넌트가 거치는 주요 시점들을 나열하기 시작했다.

1. 초기화 단계:

   • getDefaultProps(): (논의 중) 컴포넌트 클래스 자체의 기본 props를 설정.
   • getInitialState(): 컴포넌트 인스턴스의 초기 state를 설정.

2. 생성(Mounting) 단계:

   • componentWillMount(): (논의 중) 컴포- 넌트가 DOM에 렌더링되기 직전에 호출.
   • render(): 버추얼 DOM을 생성.
   • componentDidMount(): 컴포넌트가 실제 DOM에 성공적으로 렌더링된 ‘직후’에 호출.

3. 갱신(Updating) 단계:

   • componentWillReceiveProps(): (논의 중) 부모로부터 새로운 props를 받게 될 때 호출.
   • shouldComponentUpdate(): (논의 중) props나 state가 변경되었을 때, 리렌더링을 할지 말지 결정할 기회를 줌.
   • componentWillUpdate(): (논의 중) 리렌더링이 결정된 후, 실제 DOM 변경이 일어나기 직전에 호출.
   • render(): 새로운 버추얼 DOM을 생성.
   • componentDidUpdate(): (논의 중) 실제 DOM 변경이 완료된 직후에 호출.

4. 소멸(Unmounting) 단계:

   • componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 ‘직전’에 호출.

화이트보드를 가득 채운 생명주기 메서드들의 목록을 보며, 팀원들은 잠시 압도당했다. 너무 복잡해 보였다.

톰이 우려 섞인 목소리로 말했다.
“조던, 이건… 개발자들이 이 모든 걸 다 외워서 써야 한다는 겁니까? 너무 복잡해서 오히려 실수를 유발할 수도 있겠는데요.”

“아닙니다.” 조던이 단호하게 대답했다. “개발자는 이 모든 것을 알 필요가 없습니다. 대부분의 컴포넌트는 render만으로 충분하죠. 이 생명주기 메서드들은 오직 ‘부작용(Side Effects)’을 다뤄야 하는 특별한 경우에만, 필요한 것만 골라서 사용하는 선택적인 도구입니다.”

그는 맷이 겪었던 문제로 돌아갔다.
“맷의 <NewsNotifier> 컴포넌트는 두 가지 부작용이 필요했습니다. 첫째, 컴포넌트가 화면에 나타났을 때 타이머를 ‘시작’하는 것. 둘째, 화면에서 사라질 때 그 타이머를 ‘정리’하는 것.”

조던은 목록에서 두 개의 메서드를 손가락으로 가리켰다.

“componentDidMount 와 componentWillUnmount.”

“이 두 개의 메서드만 있으면 맷의 문제를 완벽하게 해결할 수 있습니다. ‘탄생’과 ‘죽음’의 순간을 정확히 포착할 수 있게 되는 거죠.”

생명주기 개념의 도입은 리액트를 단순한 렌더링 라이브러리에서, 복잡한 비동기 작업과 외부 연동까지 처리할 수 있는 완전한 UI 개발 도구로 한 단계 격상시키는 결정적인 사건이었다. 컴포넌트는 이제 스스로의 삶을 시작하고, 정리하고, 마무리할 수 있는 완전한 독립체로 거듭나게 될 터였다.