리액트의 라이프사이클

LifeCycle Method

---

리액트의 라이프 사이클 개념은 컴포넌트가 생기고, 바뀌고, 사라지는 각각의 시점을 통해 리액트를 효율적으로 다루기 위한 일종의 개념이다. 이를 통해 상황에 맞는 다양한 로직을 구현할 수 있고, 사용한 메모리를 효과적으로 반환하여 비용 문제 또한 해결할 수 있다.

🔖 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들의 집합을 의미한다. lifecycle 메서드는 클래스형 컴포넌트에서만 사용하며, 함수형 컴포넌트에서는 useEffect()를 통해 이를 구현 가능하다.

1. Mount

---

🔖 첫번째 단계는 Mount로, 컴포넌트가 생성될 때 시점의 생명주기를 의미한다.
✅ 이때 호출되는 메서드는 총 4가지이다.

// 1. constructor
  constructor(props) {
    super(props);
    console.log("constructor");
  }

➡️ 컴포넌트의 생성자 메서드로, 가장 먼저 실행되며 최상위 prop을 인자로 받는다.

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

➡️ props로 받아온 값을 state에 넣어줄 때 사용한다. return을 사용하여 특정 객체를 반환하면 컴포넌트의 state로 설정된다.

// 3. render
 render() {
    return <h1>Hello, {this.props.name}</h1>;
  }

➡️ 컴포넌트를 렌더링하는 메서드이다.

// 4. componentDidMount
componentDidUpdate(prevProps, prevState, snapshot){
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

➡️ 컴포넌트의 첫 렌더링 후 호출되는 메서드이다. 이는 이미 컴포넌트가 화면에 나타난 시점이며, 이를 통해 DOM을 조작하는 코드나 데이터 요청을 위한 fetch 함수 등을 사용한다.

Update

---

🔖 두번째는 Update로, 컴포넌트들이 업데이트되는 시점의 생명주기를 의미한다.
✅ 이때 기본적으로 실행되는 메서드는 총 5가지이다.

➡️ 첫번째는 직전의 Mount 단계에서도 실행했던 getDerivedStateFromProps() 이다.

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

➡️ 컴포넌트의 리렌더링 여부를 결정하는 메서드이다.

➡️ 세번째는 render()이다.

// 4. getSnapshotBeforeUpdate
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

➡️ 컴포넌트의 변화가 일어나기 직전의 DOM상태를 가져와 특정 값을 반환하고, componentDidUpdate()에서 이를 받아와 사용 가능하다.

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

➡️ 리렌더링을 마치고 화면에 변화가 반영된 뒤에 호출되는 메서드이다.

Unmount

---

🔖 세번째는 Unmount로, 컴포넌트들이 화면에서 사라질 때 시점의 생명주기를 의미한다.
✅ 하나의 메서드만 실행된다.

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

➡️ 컴포넌트가 화면에서 사라지기 직전에 호출된다. 이때 등록했던 이벤트를 제거한다.