React-native/Touchable Components/이벤트 헨들러의 익명함수
TouchableOpacity는 일반적인 요소들 (텍스트, 이미지 etc..)들을 터치가능하게 해줍니다.
Opacity는 불투명함이라는 뜻인데요. 터치가능한 불투명함 이라고 해석하기는 좀 이상하죠??
Opacity라는 이름이 붙은 이유는 버튼을 클릭해서 활성화되었을 때 순간적으로 그 불투명도가 올라갔다가 내려와서
사용자에게 클릭했다는 피드백을 시각적으로 줄 수 있기때문에 Opacity라는 이름이 추가된 것입니다.
네, 그럼 넘어가서...
onPress에 함수를 등록해주었습니다.
많이들하시는 실수가
onPress={onPressHandler(item.id)}
이런식으로 함수를 넣어준다는 것인데,
이것은 함수를 등록한 것이 아니라 함수의 반환값을 넣어준 것이죠...
올바르게 동작하기 위해서는
onPress={( ) => onPressHandler(item.id)}
이런식으로 익명함수 내부에 함수를 등록해주어야 합니다.
좀 자세하게 들어가보겠습니다.
const onPressHandler = id => {
console.log(id);
};
이렇게 선언된 함수가 있습니다.
onPressHandler만 작성한다면 이건 뭘까요? 함수의 이름인건 알겠습니다. 이 역할은 뭘까요?
함수의 이름 자체는 함수가 저장된 주소를 가르킵니다. 이름은 곧 함수의 주소(레퍼런스)입니다.
onPressHandler() 이건 뭘까요?
함수가 반환한 값입니다. ( )가 붙은 함수는 값을 반환합니다.
우리는 onPress={ }에 무엇을 등록하려하는 것일까요?
함수의 값이 아닌 함수의 주소입니다.
함수의 값 ...onPressHandler()... 을 넣는다면 컴포넌트가 렌더링 될 때마다, 앱이 마운트 될 때마다 버튼이 눌리지 않았음에도 바로 평가되어 원치않는 호출이(함수의 값이 반환되는 일) 반복될 것입니다.
그래서 저희는 기본적으로 이벤트리스너에 함수의 레퍼런스를 등록합니다. 컴포넌트가 렌더링 될때의 원치않는 호출을 막기위함이죠.
하지만 함수의 이름(주소)을 등록함과 동시에 그 함수(주소)에 인자를 주려면 어떻게해야합니까...???
onPress={onPressHandler}
이렇게는 함수의 주소가 등록되지만 인자를 입력하지 못하네요?
onPress={onPressHandler(id)}
이렇게는 함수에 인자를 준 반환값이 들어와버리네요...? 그러면 마운트 될 때에 원치 않는 호출이 발생합니다.
흠... 어떻게 함수의 이름(주소,레퍼런스)을 등록함과 동시에 그 함수(주소)에 인자를 줄 수 있을까요?
방법은 이거죠.
onPress={ ( ) => {onPressHandler(item.id)} }
( ) => {onPressHandler(item.id)}
그 위치가 곧 주소(이름)인 익명함수를 등록하고 익명함수 내부에 우리가 실제로 원하는 함수의 반환값을 넣어주는 것입니다.
곧 이름, 레퍼런스 내부에 값을 넣어주는 방식이라할 수 있겠네여...
익명함수 자체로 레퍼런스의 역할을 한다고 볼 수있습니다.
익명함수는 이름이 없기 때문에, 이벤트가 없는 이상 호출이 불가능합니다. 여기서는 onPress에 의해 호출되네요.
익명함수가 바로 평가되는 함수라고 많이들 알고계셔서 헷갈리실텐데
()가 없으면 호출되지 않습니다.
(function () {
//logic
})( );
바로 실행되는 익명함수입니다.
(function () {
//logic
});
실행이 되지않는 익명함수입니다. 코드에 이런 함수가 있다면 호출을 못하니 사용할 방법이 없겠죠...
우리는 바로 실행은 되지않는, 오직 이벤트에 의해서만 호출되는 바로 위에 있는 이 익명함수를 사용하는 것입니다.
좀 어려웠네요... 이야기가 산으로 간 것 같지만 꼭 필요한 이야기임에는 틀림없습니다.
이렇게 이해하셔도 무방할 것 같습니다.
우리는 오직 함수의 이름만 등록하면 onPress={} 가 실행될 때에 등록한 함수의 이름에 ( )를 동적으로 붙혀주는거라고요...
오키도키???
Ps.도움을 받은 사이트:https://flaviocopes.com/react-pass-parameter-event/