JSX Props에서 화살표 함수나 바인딩을 사용하면 안 되는 이유

React를 사용할 때는 화살표 함수나 바인딩을 사용하지 않는 것이 중요합니다. JSX 소품의 바인딩. 이러한 관행은 성능 문제와 잘못된 동작으로 이어질 수 있습니다.

성능 문제

화살표 함수를 사용하거나 JSX props 내 바인딩을 사용하면 각 렌더링에서 이러한 함수가 다시 생성됩니다. 이는 다음을 의미합니다:

• 이전 함수가 폐기되어 가비지 수집이 시작됩니다.
• 많은 요소를 지속적으로 렌더링하면 성능이 저하될 수 있습니다.
• PureComponents에 의존하는 구성 요소 또는 shouldComponentUpdate는 화살표 함수 소품 변경으로 인해 여전히 다시 렌더링을 트리거합니다.

잘못된 동작

다음 예를 고려하십시오.

onClick={() => this.handleDelete(tile)}

이 코드는 각 렌더링마다 새 함수를 생성하여 React가 구성 요소를 더티로 표시하고 다시 렌더링을 트리거하도록 합니다. 타일 ​​소품이 변경되지 않았더라도 화살표 기능이 다르기 때문에 구성요소가 다시 렌더링됩니다.

모범 사례

이러한 함정을 피하려면 다음 모범 사례:

• 생성자에서 이벤트 핸들러를 바인딩합니다.

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• 렌더링 메소드 외부에서 화살표 함수를 생성합니다:

const handleDelete = tile => {
  // Handle delete logic
};

추가 참고 사항:

화살표 기능은 렌더링 메서드 내에서와 같이 구성 요소의 다른 부분에서 사용될 때 완벽하게 작동한다는 점에 유의하는 것이 중요합니다. 그러나 JSX props에 이벤트 핸들러를 할당할 때는 피해야 합니다.