컴포넌트 생명주기

아래의 그림은 컴포넌트의 생명주기를 보여주는 대표적인 그림입니다.
외우는 것이 좋습니다. 아니, 외우는 것을 권장드립니다.
그림에 관해서는 내려가면서 천천히 이야기해보겠습니다.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
생명주기에 대해서 더 자세히 공부할 수 있는 링크입니다.

컴포넌트에게도 삶이 있고 순정이 있습니다. 그리고 그 삶에는 중요한 순간들이 있죠. 우리네 인생과도 같습니다.
우리의 인생에 중요한 순간들은 태어날 때, 결혼을 할 때, 죽음을 앞두고 있을 때 등이 있겠습니다.
마찬가지로 컴포넌트의 삶에 있어서는 생성될 때, 업데이트될 때, 제거될 때 등이 그러한 순간들입니다.

매 중요한 순간마다 컴포넌트는 새롭게 렌더링이 되고, 특정 메서드를 호출합니다. 그 메서드들은 생명주기 메서드라고 불립니다.

생명주기 메서드와 그것들의 호출 시점을 얕게 살펴보겠습니다.

생명주기 메서드

생명주기 메서드는 다음과 같습니다.

componentDidMount() : 컴포넌트가 화면에 등장한 후에 호출됩니다.
componentDidUpdate() : 컴포넌트의 상태가 업데이트된 후에 호출됩니다.
componentWillUnmount() : 컴포넌트가 화면에서 사라지기 전에 호출됩니다.

코드를 통해 메서드들의 호출 시점을 살펴보겠습니다.

다음은 TestComponent 컴포넌트를 호출하는 App 컴포넌트입니다.

function App() {
  return (
    <div>
      <TestComponent />
    <div>
  )
}

생명주기 메서드를 사용하기 위해서는 메서드를 클래스 컴포넌트에 정의를 해주어야 합니다.
함수 컴포넌트는 안 됩니다.

// 클래스 컴포넌트
class TestComponent extends React.Component {
  // 생성자 함수
  constructor(props) {
    super(props);
    ...
    console.log('응애응애');
  }
  
  ...
  // 생성될 때 호출됨
  componentDidMount() {
    console.log('화면에 등장한 후');
  }
    
  // 업데이트될 때 호출됨
  componentDidUpdate() {
    console.log('새로운 상태를 가진 후');
  }
    
  // 제거될 때 호출됨
  componentWillUnmount() {
    console.log('화면에서 사라지기 전');
  }
  
  // 렌더링
  render() {
    console.log('렌더링');
    return (
      ...
    )
  } 
}

위의 코드에서는 화면에 등장한 후, 새로운 상태를 가진 후, 화면에서 사라지기 전뿐만 아니라 생성될 때, 렌더링 될 때에도 각각 console.log를 찍어봤습니다.

componentDidMount

위 코드를 그저 실행시키면 콘솔에 어떤 내용이 찍힐까요? 다음과 같습니다.

클래스 호출 시 가장 먼저 생성자 함수가 실행되어서 '응애응애'가 콘솔에 가장 먼저 찍혔습니다.
그 다음으로는 렌더링 함수가 호출되면서 '렌더링'이 콘솔에 찍혔습니다.
마지막으로 컴포넌트가 화면에 등장한 직후에 호출되는 함수인 componentDidMount() 메서드가 호출되어서 '화면에 등장한 후'가 콘솔에 찍혔습니다.

가장 위의 그림과 같이, constructor -> render -> componentDidMount 순으로 호출되었습니다.

!!!
이처럼 componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행됩니다.
컴포넌트에 타이머를 설정해야 할 경우가 있다면, 이 장소가 가장 적합한 장소라고 합니다.

componentUpdateMount

그렇다면 컴포넌트에 새로운 상태를 준다면 어떻게 될까요? 새로운 상태를 줘보았습니다.

버튼을 클릭하여 새로운 상태를 주었습니다. 그리고 아래와 같은 내용이 콘솔에 찍혔습니다.

!!!
상태가 변하자 먼저 렌더링 함수가 실행됐습니다. 그 다음으로는 componentUpdateMount() 메서드가 호출되면서 '새로운 상태를 가진 후'가 콘솔에 찍힌 것을 볼 수 있습니다.

역시 가장 위 그림에서와 같이, render -> componentDidUpdate 순으로 메서드가 호출되었습니다.

!!!
기억해야 할 것은, 상태가 변경되었을 때에도 render 함수가 호출된다는 것입니다.

componentWillUnmount

마지막으로 컴포넌트를 화면에서 제거해봤습니다. 콘솔에 어떤 내용이 찍힐까요?

!!!
다른 메서드들은 전혀 호출되지 않고 componentWillUnmount() 메서드만 호출이 된 것을 볼 수 있습니다. 역시 위 그림과 정확히 일치하게 호출됩니다.

마치 생의 끝자락에서 남기는 유언과도 같아 씁쓸한 마음이 듭니다.

기억할 것

다만 기억해야 할 것은, 생명주기 메서드들은 클래스 컴포넌트에서만 사용이 가능하다는 것입니다.
함수 컴포넌트 노노

그렇다면 생명주기 메서드가 왜 필요할까요?

컴포넌트의 상태가 변화됐을 때 혹은 처음 마운트됐을 때, 컴포넌트 안에서 비동기 요청을 보낼 때가 많다고 합니다. 그 때에는 render나 constructor에서 비동기 함수를 호출할 수 없다고 하네요. 그럴 때에 생명주기 메서드가 아주 유용하게 사용된다고 합니다.

또 componentWillUnmount같은 경우에는, 복잡한 작업을 하고 메모리를 비워줘야 할 때에, 메서드 안에서 작업을 해줄 수 있다고 합니다.

아직은 생명주기 메서드가 어떻게 유용하게 사용될 지 실감이 되지 않습니다. 하지만 머지않아 매우 유용하게 사용될 것 같습니다.