React의 생명주기와 최적화

React 생명 주기

Class Component

위의 생명 주기 모델을 보면 setState()이나 Props 값이 변할 때 render를 진행하는 것을 알 수 있다.
이는 매우 비효율 적이다.

반면, shouldComponentUpdate를 사용해서 rendering을 필요한 상황에서만 실행되게 할 수 있다.

---

ShouldComponentUpdate와 React.memo

ShouldComponentUpdate

성능 최적화 - 공식 문서 (이 부분은 참고로 넣어둠.)

shouldComponentUpdate 이것은 특정 상황에서만 rerender가 진행될 수 있도록 만드는 부분이다.

아래는 예시.

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

---

React.memo

React.memo 공식 문서

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProp가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, areEqual);