web study/react-native

[RN] onLayout 사용 시 android에서 앱 꺼짐 현상

0youn 2022. 1. 6. 19:54

요새 몸 건강도 안좋고 해서 포스팅을 안하고 있었는데 오늘 할 포스팅 내용의 원인을 정확히 몰라

이건 꼭 기록해둬야겠다 싶어서 남기려 한다.

 

rn에서 onLayout 이벤트를 사용하여 컴포넌트의 크기와 위치를 계산하여 특정 버튼을 클릭하면

해당 컴포넌트의 위치로 스크롤 되게 하는 코드를 짜놧었다.

 

근데 dev 환경에서 실행 했을 때는 잘 되던 친구가 빌드를 해서 실제로 실행하려고 보니 해당 컴포넌트가 호출 될 때 마다

앱이 꺼지는 현상이 발생했다.

 

원인을 찾던 중 onLayout이 실행 될 때 발생한다는 것을 깨닳고 별의 별 노가다를 다 해봣는데

정상적으로 실행이 안되서 왜 이러나 고민하던 찰나

다른데에서는 onLayout이 정상적으로 실행되고 있어 2개를 비교해보니 아주 약간의 차이가 있었다.

<test
	onLayout = {(e) => {
		callback(e)    
    }}
/> // 앱이 크래쉬남

<test
	onLayout = {(e) => {
		const layout = event.nativeEvent.layout;  
        ...
    }}
/> // 크래시 안남

크래시 나던 쪽은 외부에서 함수를 선언하고 내부에서 실행하여 e를 전달했었고

크래시가 안나던 쪽은 내부에서 로직을 실행했다는 차이가 있었다..

 

왜 이런 에러가 나는지는 정확히 이유를 알 수 없어서 아래와 같은 코드로 수정을 했으나

원인을 명확하게 알지 못해서 조금 아쉽긴 하다..

 

아무튼 onLayout과 관련하여 나와 같이 헤딩하는 분들이 없길 바란다...