본 시리즈는 같은 학원 수강생들과 함께하는 React 스터디 진행의 내용을 바탕으로 무작정 부딪치고 시간을 들여 얻은 지식을 공유하고자 한다.
학습 내용은 Do it! 리액트 프로그래밍 정석 교재를 기반으로 작성했다.

리액트 컴포넌트의 생명주기

---

리액트의 컴포넌트는 지정되어있는 생명주기 함수가 존재하며 이를 재정의하여 원하는 시점에 동작을 수행할 수 있다. 단, 생명주기 함수는 리액트 엔진에서 자동으로 호출하는 것으로 개발자가 마음대로 호출할 수 없다.

출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

여러 생명주기 함수가 있지만 우리가 현재 눈여겨볼 함수는 shouldComponentUpdate(), componentDidMount()이다. 이 함수들은 리액트를 사용하여 개발할 때 성능과 관련이 있으므로 적당한 때에 맞춰 사용할 줄 알면 좋다.

shouldComponentUpdate(nextProps, nextState, nextContext)

shouldComponentUpdate() 함수는 props가 변경되거나 state 값이 변경되면 화면을 다시 그려야 하는지 판단하는 함수이다. 웹 페이지를 다시 렌더링하는 것은 성능에 영향을 끼치므로 최적화가 필요할 때 사용된다. 기본값은 true이며 false가 리턴되면 해당 컴포넌트는 다시 렌더링하지 않는다. 그래서 return 문에 비교 연산자를 작성하면 props나 state의 변경 여부에 따라 다시 렌더링을 수행할지 정할 수 있다.

// lifecycle/SCU.jsx
import React, { Component } from 'react';

class SCU extends Component {
  state = {
    number: 0,
  };

  increase = () => {
    this.setState({
      number: this.state.number + 1,
    });
  };

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    console.log(
      `shouldComponentUpdate
      현재 state: ${this.state.number}
      다음 state: ${nextState.number}`
    );

    return nextState.number % 2 === 0; // 2의 배수이면 다시 렌더링
  }

  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.increase}>+1</button>
      </div>
    );
  }
}

export default SCU;

// App.js
import React from 'react';
import SCU from './lifecycle/SCU';

function App() {
  return (
    <>
      <SCU />
    </>
  );
};

export default App;

짝수일때만 화면이 그려지도록 코드를 작성했다. 버튼을 클릭하면 state.number는 1씩 증가하고 shouldUpdateComponent 함수가 호출되어 현재 state.number와 변할 state.number를 검사하여 다시 렌더링할지 결정하게 된다.

componentDidMount()

componentDidMount() 함수는 컴포넌트가 첫 렌더링을 마치고 호출되는 함수이다. 일반적으로 AJAX 같은 화면이 그려지고 나서 수행할 동작을 작성한다.

// lifecycle/CDM.jsx
import React, { Component } from 'react';

class CDM extends Component {
  componentDidMount() {
    console.log('componentDidMount (렌더링 완료)');
  }

  render() {
    return <div></div>;
  }
}

export default CDM;

// App.js
import React from 'react';
import CDM from './lifecycle/CDM';

function App() {
  return (
    <>
      <CDM />
    </>
  );
}

export default App;

우리가 개발할 때 중요한 두 가지 컴포넌트 생명주기 함수를 알아보았다. 물론 그 외의 생명주기 함수도 사용할 수 있으니 Do it! 리액트 프로그래밍 정석 교재를 참고하도록 하자.