[React Native/TS] onLyaout 이벤트

• 모든 R/N 코어 컴포넌트는 onLayout 이벤트 속성을 제공
  ┗ 또한 LayoutChangeEvent 타입을 제공

Type

import type {LayoutChangeEvent} from 'react-native'

• 위의 타입은 onLayout 이벤트 속성에 설정하는 이벤트 처리기의 입력 배개변수 타입

Type use

const onLayout = (e: LayoutChangeEvent) => {};

LayoutRectangle 타입 layout 얻기

export interface LayoutChangeEvent {
  nativeEvent: {
    layout: LayoutRectangle;
  }
}

컴포넌트의 위치와 크기 알아내기

const onLayout = (e: LayoutChangeEvent) => {
  const {layout} = e.nativeEvent; // layout 추출 
  console.log('onLayout', layout); // layout 출력
}
<View onLayout={onLayout} /> // layout 부여

useLayout 커스텀 hook 제작

1. 반환 형태 배열로 설정 : TS에서 반환 타입 설정안하면 오류 생김
2. useState의 초기 값으로 LayoutRectangle 형태 설정
3. onLayout 함수 useCallback을 통해 최적화
   ┗ layout 을 e.nativeEvent로 부터 추출
4. 배열 return 설정