최적의 성능을 위해 화살표 함수를 피하고 JSX 소품에 바인딩

React의 린트 도구는 잠재적인 문제를 강조하여 코드 관행을 향상시키는 것을 목표로 합니다. 일반적인 오류 메시지 중 하나는 "JSX props는 화살표 기능을 사용하면 안 됩니다."입니다. 이는 화살표 기능을 사용하거나 JSX props 내에서 바인딩하는 것이 해로운 효과를 지적합니다.

애로우 함수와 바인딩이 성능을 저해하는 이유

화살표 기능을 통합하거나 JSX props에 바인딩하면 성능 영향:

• 가비지 수집: 화살표 기능이 실행될 때마다 생성되면 이전 것은 폐기됩니다. 여러 요소가 인라인 함수로 렌더링되면 애니메이션이 끊길 수 있습니다.
• 렌더링: 인라인 화살표 함수는 shouldComponentUpdate 메서드를 사용하는 PureComponents 및 구성 요소에서 사용하는 얕은 비교 메커니즘을 방해합니다. 화살표 함수 prop이 매번 다시 생성되므로 prop 변경으로 감지되어 불필요한 재렌더링이 발생합니다.

인라인 핸들러가 재렌더링에 미치는 영향

고려하세요 다음 예는 다음과 같습니다.

예 1: 인라인이 없는 PureComponent Handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

이 코드에서 Button 구성 요소는 PureComponent에 대해 예상한 대로 props가 변경될 때만 다시 렌더링됩니다.

예 2: 인라인 핸들러가 있는 PureComponent

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

인라인 화살표 기능으로 인해 이제 구성 요소 상태가 변경되지 않은 경우에도 Button이 매번 다시 렌더링됩니다. 이러한 불필요한 다시 렌더링은 성능에 심각한 영향을 미칠 수 있습니다.

모범 사례

이러한 성능 문제를 방지하려면 다음 모범 사례를 따르는 것이 좋습니다.

• JSX 외부에서 이벤트 핸들러 정의: 화살표 함수 추출 또는 메소드를 별도의 변수에 바인딩 선언.
• 이 바인딩을 사용합니다: 클래스 구성 요소의 경우 생성자에서 이벤트 핸들러를 여기에 바인딩합니다.
• 고차 함수 활용: 고려 JSX에서 보다 효율적인 이벤트 처리를 위해 map 또는 binActionCreators와 같은 고차 함수를 사용합니다.