라이프사이클이란?

만약 면접관이 아래와 같은 질문을 한다면

<aside> 🗣 리액트에서 라이프사이클이란 무엇이죠?

</aside>

보통 아래와 같이 “생명주기를 관리하는 메서드의 집합”이라고 대답할 것이다.

<aside> 🗣 라이프사이클은 컴포넌트의 생명주기를 관리하는 메서드의 집합입니다. 이 메서드들은 컴포넌트가 생성되고 업데이트되고 제거 될 때 호출되는 형태로 Hooks로 구성되어 있습니다. 생명주기는 마운트, 업데이트, 언마운트 단계로 이뤄집니다.

</aside>

솔직히 생명주기에 대해 Hooks의 기능적인 부분으로 알고 있었는데 이번 기회에 메서드 하나하나씩 파고들어봐야겠다.

1. 마운트(Mount)

컴포넌트가 생성되면 호출하는 함수다. 컴포넌트가 생성되어 DOM에 추가되는 단계로 “useEffect”를 사용하여 마운트 시 동작을 설정할 수 있다.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timerID);
    };
  }, []);

  return <div>{time.toLocaleTimeString()}</div>;
}

위의 예시에서 “useEffect” Hooks는 컴포넌트가 마운트될 때 한 번 실행되며, “setInterval”을 사용하여 1초마다 “time” 상태를 업데이트 한다. (마운팅은 당연히 state, props의 업데이트로 렌더링 될 때 발생한다)

또한, “useEffect”의 반환 함수인 “clearInterval”는 컴포넌트가 unMount될 때, 실행되며 타이머를 정리한다.

2. 업데이트(Update)

컴포넌트의 상태가 변경되어 다시 렌더링되는 단계다. 업데이트는 위에 예시에서도 충분히 설명이 가능하다.

위의 예시에서 마운팅의 전제조건이 바로 업데이트(update)다.

리액트에서 업데이트는 state, props의 상태변화에 따라 이뤄진다. 업데이트가 되면 리액트는 VirtualDOM에 의해 변경된 부분만 Re-rendering된다.