React life cycle

요약

• 모든 React 컴포넌트는 기본적으로 동일한 생명주기를 거칩니다.
• 컴포넌트가 화면에 추가될 때 마운트 됩니다.
• 새로운 props나 state 를 받거나 변경되면 업데이트 됩니다.
• 화면에서 제거되면 컴포넌트가 마운트 해제됩니다.

• 함수형 컴포넌트는 useEffect를 사용하여 클래스형 컴포넌트의 생명주기와 비슷하게 동작시킬 수 있습니다.

• 생명 주기를 생각하지 않고 구현할 경우 성능에 문제가 생길 수 있습니다.

♼ 클래스형 컴포넌트에서의 생명 주기

요약

1. 가장 먼저 constructor가 실행됩니다.

2. getDerivedStateFromProps 를 정의했다면 render가 호출되기 전에 props와 state를 판단하여 업데이트를 할지 말지 결정합니다. (마운트, 업데이트)

3. render를 호출하여 첫 렌더링을 합니다.

4. 첫 렌더링이 끝났다면 componentDidMount를 호출합니다.

5. 만약 컴포넌트 내에서 변화가 감지되었다면 componentDidUpdate를 호출합니다.

6. 컴포넌트를 제거한다면 componentWillUnmount를 호출합니다.

7. shouldComponentUpdate를 이용하여 리렌더링을 건너뛰어 성능 최적화를 할 수 있습니다.

🔍 생성(mount)

📌 constructor(props)

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

📌 static getDerivedStateFromProps(props, state)

class Form extends Component {
  state = {
    email: this.props.defaultEmail,
    prevUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    if (props.userID !== state.prevUserID) {
      return {
        prevUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }
}

• 렌더링 단계에서 부작용을 방지하기 위해서 (내부 데이터를 건드리지 않아야 함)

📌 render()

📌 componentDidMount

🔍 업데이트(update)

📌 static getDerivedStateFromProps(props, state)

📌 shouldComponentUpdate(nextProps, nextState, nextContext)

class Rectangle extends Component {
  state = {
    isHovered: false
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextProps.position.x === this.props.position.x &&
      nextProps.position.y === this.props.position.y &&
      nextProps.size.width === this.props.size.width &&
      nextProps.size.height === this.props.size.height &&
      nextState.isHovered === this.state.isHovered
    ) {
      return false;
    }
    return true;
  }
}

• 이 메서드는 성능 최적화만을 위해 사용합니다.

• 메서드 내부에서 JSON.stringify를 사용하지 않아야 합니다.
• JSON.stringify는 비용이 많이 드는 작업인데 shouldComponentUpdate에 사용한다면 리렌더링이 될 때마다 실행됩니다. 따라서 성능에 좋지 못합니다.
• 원했던 것보다 더 최적화될 수 있습니다.

• false를 반환해도 state가 변경된다면 자식 컴포넌트의 리렌더링을 막지 못합니다.

• 함수형 컴포넌트의 memo로 최적화하는 것과 유사합니다.

📌 render()

📌 getSnapshotBeforeUpdate(prevProps, prevState)

📌 componentDidUpdate(prevProps, prevState, snapshot?)

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) { // snapshot : getSnapshotBeforeUpdate에서 반환된 값
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

• 만약 shouldComponentUpdate가 정의되어 있고 false를 반환했다면, getSnapshotBeforeUpdate는 호출되지 않습니다.

🔍 제거(unmount)

📌 componentWillUnmount()

♼ 함수형 컴포넌트에서의 생명주기

요약

1. 함수형 컴포넌트가 호출됩니다.

2. 컴포넌트 내부에 선언되어 있는 로직들이 실행됩니다. ( constructor )

3. return문에 있는 jsx 구문이 렌더링됩니다. ( render )

4. useEffect가 있다면 마지막으로 실행됩니다.
componentDidMount
• 비어 있는 종속성 배열을 가진 useEffect
componentDidUpdate
• useEffect의 의존성 배열의 변화가 감지될 때마다
componentWillUnmount
• useEffect의 cleanup 함수

5. 만약 클래스형 컴포넌트의 shouldComponentUpdate 메서드 처럼 리렌더링 최적화를 원한다면 useMemo나 useCallback 같은 메모이제이션 기법을 활용할 수 있습니다.

수명 주기를 제대로 생각하지 않을 경우?

참조