[React Native] onLayout 이벤트

import { LayoutChangeEvent, View, Text } from 'react-native';

const handleLayout = (event: LayoutChangeEvent) => {
  const { x, y, width, height } = event.nativeEvent.layout;
  console.log(`위치: (${x}, ${y}), 크기: ${width} x ${height}`);
};

<View onLayout={handleLayout}>
  <Text>Hello World</Text>
</View>

React Native의 onLayout은 컴포넌트가 화면에 렌더링되고 레이아웃이 계산된 후에 호출되는 이벤트 핸들러다.

컴포넌트의 위치(x, y)와 크기(width, height) 정보를 실시간으로 얻을 수 있다.

 

다만, 레이아웃이 변경될 때마다 onLayout이 호출되므로, 복잡한 로직을 넣으면 성능에 영향을 줄 수 있다. 필요한 경우에만 사용하고, 무한 렌더링이 되는지 잘 살펴야 한다.