함수 직접 호출과 함수 참조 전달 차이

1. onPress={() => handleClickedSave()}

이 문법에서는 화살표 함수를 사용하여 handleClickedSave를 호출

<Button onPress={() => handleClickedSave()} />

• 장점:
  • handleClickedSave에 인수를 전달할 수 있음
  • 컴포넌트가 렌더링될 때마다 새로운 함수가 생성되므로, 항상 최신의 상태를 유지할 수 있음
• 단점:
  • 컴포넌트가 렌더링될 때마다 새로운 함수가 생성되기 때문에, 렌더링이 빈번하게 발생하는 경우 성능 문제가 발생할 수 있음
  • 깊이 중첩된 컴포넌트나 자식 컴포넌트가 많은 경우, 성능에 영향을 미칠 수 있음

 

2. onPress={handleClickedSave}

이 문법에서는 함수 참조를 직접 onPress 속성에 전달

<Button onPress={handleClickedSave} />

• 장점:
  • 렌더링할 때마다 새로운 함수가 생성되지 않으므로, 일반적으로 더 나은 성능을 제공
  • 메모리 사용이 적고, 특히 렌더링이 빈번하게 발생하는 경우 유리
• 단점:
  • 인수를 전달할 수 없음. 인수를 전달해야 한다면 화살표 함수를 사용해야 함

요약

• onPress={() => handleClickedSave()}: 새로운 함수가 매 렌더링마다 생성됨. 인수를 전달할 수 있음
• onPress={handleClickedSave}: 함수 참조가 그대로 전달됨. 성능이 더 GOOD

대부분의 경우, 인수를 전달할 필요가 없다면 두 번째 방법(onPress={handleClickedSave})을 사용하는 것이 좋음

> 성능 최적화에 유리하기 때문에

인수를 전달해야 한다면 첫 번째 방법(onPress={() => handleClickedSave()})을 사용