bind()와 화살표 함수 (arrow function)

bind()와 화살표 함수 (arrow function)

리액트에서도 마찬가지겠지만, 리엑트 네이티브에서 컴포넌트에 이벤트 리스너를 추가할 때 (예를 들면 TouchableOpacity의 onPress에 이벤트 리스너를 추가할 때) 흔히 bind()와 화살표 함수를 사용한다.

예를 들어, 버튼을 누르면 "generateList('product')"가 실행되도록 만들고 싶다면 다음과 같은 2 가지 방법으로 구현할 수 있다.

1) bind()

<TouchableOpactiy onClick={this.generateList.bind(this, 'product')}> <Text>Product</Text> </TouchableOpactiy >

2) 화살표 함수 (arrow function)

<TouchableOpactiy onClick={() => this.generateList('product')}> <Text>Product</Text> </TouchableOpactiy>

두 방법 모두 렌더링 시에 함수를 실행시키지 않고, 함수 자체를 리턴시켜서 이벤트 리스너로서 장착시키지만, 한 가지 차이점이 있다. 화살표 함수를 사용한 방식은 익명 함수 (annonymous function)을 만들어서 이벤트 리스너로서 장착시키는 것인데, 이 익명 함수는 render() 메소드가 실행될 때마다 새로 만들어진다. 알다시피, 리엑트 네이티브에서 render() 함수는 변화가 있을 때마다 실행이 된다. 따라서, 변화가 잦으면 render() 메소드가 여러번 실행되게 된다.

이렇게 render() 메소드가 여러번 실행되게 되면 익명 함수도 여러 번 만들어지게 되고, 그 익명 함수를 만드는 과정은 순수 오버헤드가 된다. 다시 말해, 변화가 잦아서 render() 메소드가 자주 실행되는 경우, 익명 함수를 쓰는 것은 비효율적이게 되는 것이다.