레이아웃 측정하기

때로는 전체 레이아웃에 변경을 적용하거나 특정 로직을 실행하기 위해 현재 레이아웃을 측정해야 할 때가 있다.

React Native는 뷰의 크기를 측정할 수 있는 네이티브 메서드를 제공한다. 이 메서드를 호출하는 가장 좋은 방법은 useLayoutEffect 훅을 사용하는 것이다. 이 훅은 가장 최신의 측정값을 제공하며, 측정이 완료된 동일한 프레임 내에서 변경 사항을 적용할 수 있게 해준다.

일반적인 코드는 다음과 같다:

tsx

function AComponent(children) {
  const targetRef = React.useRef(null)

  useLayoutEffect(() => {
    targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
      // 측정값을 활용하여 작업 수행
    });
  }, [ /* 의존성 추가 */]);

  return (
    <View ref={targetRef}>
     {children}
    <View />
  );
}

note

여기서 설명한 메서드는 React Native가 제공하는 대부분의 기본 컴포넌트에서 사용할 수 있다. 하지만 네이티브 뷰로 직접 지원되지 않는 합성 컴포넌트에서는 사용할 수 없다. 일반적으로 여러분이 직접 정의한 대부분의 컴포넌트가 여기에 해당한다.

measure(callback)

주어진 뷰의 화면 상 위치(x와 y), 너비, 높이를 뷰포트 기준으로 측정한다. 측정된 값은 비동기 콜백을 통해 반환된다. 측정이 성공하면 콜백은 다음과 같은 인자와 함께 호출된다:

• x: 측정된 뷰의 원점(좌상단 모서리)의 뷰포트 내 x 좌표
• y: 측정된 뷰의 원점(좌상단 모서리)의 뷰포트 내 y 좌표
• width: 뷰의 너비
• height: 뷰의 높이
• pageX: 뷰포트(일반적으로 전체 화면) 내 뷰의 x 좌표
• pageY: 뷰포트(일반적으로 전체 화면) 내 뷰의 y 좌표

measure()가 반환하는 width와 height는 뷰포트 내 컴포넌트의 실제 너비와 높이를 나타낸다.

measureInWindow(callback)

주어진 뷰의 윈도우 내 위치(x, y)를 결정하고 비동기 콜백을 통해 값을 반환한다. React 루트 뷰가 다른 네이티브 뷰에 내장된 경우, 이 메서드는 절대 좌표를 제공한다. 성공하면 콜백은 다음과 같은 인자와 함께 호출된다:

• x: 현재 윈도우 내 뷰의 x 좌표
• y: 현재 윈도우 내 뷰의 y 좌표
• width: 뷰의 너비
• height: 뷰의 높이