목표

• 컴포넌트의 생명 주기 대해 톺아본다.

5. 컴포넌트 생명 주기

• 리액트는 컴포넌트에 대해 다음과 같이 설명하였다.

모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.

5-1. 마운트

• 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 다음 메서드가 순서대로 호출된다. (진하게 표시된 메서드만 자주 사용된다.)

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

5-1-1. constructor()

• 리액트에서 생성자는 보통 두 가지 목적을 위해 사용된다. 필요하지 않다면 생성자를 구현하지 않아도 된다.

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

• 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다.
• React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 한다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있다.

constructor(props) {
  super(props);
  // 여기서 this.setState()를 호출하면 안 됩니다!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

• constructor() 내부에서 setState() 대신 this.state에 초기 state 값을 할당하면 된다.
• 또한, 리액트에서는 다음과 같은 주의사항이 있다고 한다.

💡 주의

state에 props를 복사하면 안 됩니다! 가장 흔히 범하는 실수 중 하나입니다.

constructor(props) {
 super(props);
 // 이렇게 하지 마세요!
 this.state = { color: props.color };
}

• color props의 값이 변하더라도 state에 반영되지 않는다는 버그가 발생한다.
• 이 경우는 props의 갱신을 의도적으로 무시해야 할 때만 이와 같은 패턴을 사용해야 한다고 한다.
• 이 경우, 해당 props의 이름을 initialColor 또는 defaultColor 등으로 하는 것이 좋다.

5-1-2. render()

• render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다.
• 이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환한다.
  1. React 엘리먼트.
  2. 배열과 Fragment
  3. Portal
     • 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링하는 것을 말한다. Portals에서 확인할 수 있다.
  4. 문자열과 숫자
  5. Boolean 또는 null
     

• render() 함수는 순수해야 한다. 즉, 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않는다.
• 브라우저와 상호작용하는 작업이 필요하다면, 해당 작업을 componentDidMount()나 다른 생명주기 메서드 내에서 수행하면 된다.

5-1-3. componentDidMount()

• 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다.
• 보통 DOM 노드가 있어야 하는 초기화 작업이나 외부에서 데이터를 불러오는 작업이 이루어진다.

5-2. 업데이트

• props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

5-2-1. componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

• componentDidUpdate()는 갱신이 일어난 직후에 호출된다.
• 컴포넌트가 갱신되었을 때 DOM을 조작하기 위해 사용하거나 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업을 수행할 때 사용한다.

componentDidUpdate(prevProps) {
  // 전형적인 사용 사례 (props 비교를 잊지 마세요)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

• componentDidUpdate()에서 setState()를 즉시 호출할 수도 있지만, 위의 예시처럼 조건문으로 감싸지 않으면 무한 반복이 발생해 추가적인 렌더링을 유발하여컴포넌트 성능에 영향을 미칠 수 있다.

5-3.마운트 해제

• 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

  1. componentWillUnmount()

5-2-1. componentWillUnmount()

• componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
• 이 메서드 내에서 타이머 제거, 네트워크 요청 취소 등 정리 작업을 주로 수행한다.

---

• 이제까지 살펴 본 메서드들을 도표로 정리하면 다음과 같다. 이 도표는 여기서 확인할 수 있다.

---

출처

• react-component(React)
• react-lifecycle-methods-diagram