컴포넌트의 생명주기 ♻️

리액트 컴포넌트는 생성과 업데이트 그리고 제거까지의 생명주기가 존재한다. 그리고 생명주기 마다 사용 가능한 생명주기 메서드들이 존재하며, 해당 메서드를 오버라이딩 하여 특정 시점에 코드가 실행될 수 있도록 할 수 있다.

메소드 오버라이딩(method overriding)

객체 지향 프로그래밍에서 서브클래스 또는 자식 클래스가 자신의 슈퍼클래스들 또는 부모 클래스들 중 하나에 의해 이미 제공된 메소드를 특정한 형태로 구현하는 것

위키백과 : 메소드 오버라이딩 🔖
생명주기 메서드는 클래스형 컴포넌트에서만 사용 가능하고, 함수형 컴포넌트의 경우 훅(useEffect)으로 이를 대체하고 있다.

리액트 컴포넌트 생명주기 메서드는 다음의 도표로 확인할 수 있다.

컴포넌트 생명주기 도표 링크 🔖

위 메서드들을 생명주기 단위로 구분하여 차례대로 알아볼 것이다. 자주 사용하는 메서드의 경우 굵게 표시하였으며, 겹치는 메서드는 두 번째 부터 생략했다.

마운트 📥

컴포넌트의 인스턴스가 생성되는 단계에 해당하며, 페이지에 처음으로 나타나는 단계이다. 자세하게 말하면 컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때까지의 단계를 의미한다. 마운트 단계에서는 다음과 같은 메서드가 호출된다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

constructor()

constructor() {
  super();
  this.state = { counter: 0 };
}

번역 그대로 생성자를 의미하며, 컴포넌트의 마운트 전에 호출된다. 주의할 점으로 super() 를 필수로 호출해야 하며, super() 를 생략할 경우 this 를 사용할 수 없다.

super(props) 를 써야하는 이유에 대한 포스팅 🔖

생성자는 다음 두 가지의 이유로 사용된다.

• this.state에 객체를 할당하여 지역 state를 초기화
• 인스턴스에 이벤트 처리 메서드를 바인딩

그렇기 때문에, 메서드 바인딩이나 state 초기화 작업이 없다면 생략 가능하다.

static getDerivedStateFromProps()

props 로 부터 받은 것을 state 로 동기화하기 위해 사용한다. Derived 를 번역하면 파생이라는 의미를 갖는다. 반환 값으로 갱신을 위한 객체를 반환하거나, 아무 것도 갱신하지 않기 위해 null을 반환하기도 한다.

// static getDerivedStateFromProps() 예시

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

위와 같이 static 을 필요로 하고, 이 안에서는 this 를 조회할 수 없다.

render()

render() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

컴포넌트를 렌더링 하는 메서드다. 클래스 컴포넌트에서 반드시 구현되어야 하는 메서드이고 메서드 호출 시, this.props 와 this.state 값을 활용해 아래 중 하나를 반환해야 한다.

• React Element
• Array and Fragment
• Portal
• String and Number
• Boolean or null

배열 렌더링에 대한 포스팅 🔖
Portal 렌더링에 대한 포스팅 🔖

componentDidMount()

컴포넌트가 마운트 된 직후에 호출되며, 해당 메서드가 호출되는 시점은 이미 컴포넌트가 화면에 나타난 상태이다.

DOM 노드를 사용하는 초기화 작업이나 외부 데이터 요청 시, 네트워크 요청을 보내기 적절한 위치다.

componentDidMount() : AJAX의 호출 위치 🔖

업데이트 📦

props 혹은 state 가 변경되면 업데이트가 실행된다. 업데이트가 되는 시점에서는 다음의 메서드들이 호출된다.

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

shouldComponentUpdate()

컴포넌트의 리렌더링 여부를 결정한다. 자세히 말하자면, state 또는 props 의 변화가 컴포넌트의 출력 결과에 영향을 미치는 지에 대한 여부를 의미한다. 기본 값은 true 이며, 해당 메서드는 성능 최적화를 위해 주로 사용한다.

 shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않는다.
    return nextState.number % 10 !== 4;
  }

React Application의 성능 최적화와 관련된 내용 🔖

getSnapshotBeforeUpdate()

컴포넌트가 DOM으로부터 변화가 일어나기 전의 정보를 얻어 특정 값을 반환한다. 반환된 값은 componentDidUpdate() 메서드에서 활용할 수 있다. 채팅창과 같은 UI에서 주로 사용되며, 자주 사용되지는 않는다. 참고로 함수형에서의 Hooks 는 이를 대체할 기능이 아직 없다고 한다.

이 말이 무슨 말인가 싶다면 당신은 정상이다.

벨로퍼트님의 LifeCycle Method 중 getSnapshotBeforeUpdate() 🔖

componentDidUpdate()

컴포넌트가 갱신된 직후에 호출되는 메서드이다. 갱신 뒤의 DOM을 조작하기 위해 활용하며, 위에서 언급한 getSnapshotBeforeUpdate() 의 snapshot 값을 조회할 수 있다.

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", prevProps, prevState);
  if (snapshot) {
    console.log("업데이트 되기 직전 색상: ", snapshot);
  }
}

언마운트 📤

컴포넌트가 DOM에서 제거될 때를 의미하며, 화면에서 컴포넌트가 사라지는 것을 말한다. 언마운트 단계에선 다음 메서드만 존재한다.

• componentWillUnmount()

componentWillUnmount()

주로 DOM에 등록한 이벤트를 제거하고, 타이머(setTimeout) 제거, 네트워크 요청 취소 등을 진행한다. 추가적으로 외부 라이브러리에 dispose 기능이 있다면 여기서 호출한다. 함수형에서는 useEffect CleanUp 함수를 통해 가능하다.

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

🔖 참고

리액트 공식 문서 : React.Component
Kyun2da.dev : 리액트 라이프사이클의 이해
벨로퍼트와 함께하는 모던 리액트 : 25. LifeCycle Method
Howdy : React Lifecycle(생명 주기)
리액트 공식 문서 : State and Lifecycle