React - props의 문제점

• 렌더링이 많이, 중복해서 일어날 경우 성능이 안 좋아진다.
• react developer tools extension
  - highlight render를 설정하면 렌더링이 될 때마다 렌더링되는 구역을 확인할 수 있다.
  -border color 초록 - > 빨강 순으로 성능 문제가 위험이 커짐
• 기본적으로는 state, props가 바뀌었을 때 렌더링이 되지만 값을 바꾸지 않아도 값을 바꾸는 메서드(like setState)를 호출하면 재렌더링 됨.
• hook의 경우는 state가 바뀌면 함수 전체가 다시 실행된다.

shouldComponentUpdate

사용하여 렌더링 조건을 설정.(hook는 useEffect등 이용)

class Test extends Component {
  state = {
    counter: 0,
  };
  shouldComponentUpdate(nextProps, nextState, nexContext) {
    if (this.state.counter !== nextState.counter) {
      return true;
    }
    return false;
  }
  onClick = () => {
    this.setState({});
  };
  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

purecomponent, React Memo

• 위보다 더 편한 방식이 class > purecomponent / hook > memo
• purecomponent는 스테이트 내 값이 바뀌었는지 안바뀌었는지를 판단함
• 객체나 배열 같은 경우 값의 변화 판단이 어려울 수 있음.
• 그래서 spread operator를 써서 값의 변화를 인식하게 해줘야 함
  - 2차원 배열 또는 객체 내 배열 등 2-3중으로 되어 있는 경우도 적절히 적용해서 값의 변화를 알려줘야 함.
• 자식 컴포넌트가 모두 purecomponent or Memo일 경우 부모 컴포넌트에도 적용할 수 있다.

import React, {PureComponet} from 'react';
class Test2 extends PureComponent {
  state = {
    counter: 0,
    try: 'hello',
    number: 1,
    boolean: true,
    object: {},
    array: [],
  };
  onClick = () => {
    this.setState({
      array: [...this.state.array, 1],
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}