7.4.2 화면 크기 조회하기

화면 크기를 dp 단위로 가져오는 방법은 두 가지입니다. 첫 번째 방법은 Dimensions.get을 사용하는 것입니다.

import {Dimensions} from 'react-native';

const { width, height } = Dimensions.get('window');

Dimensions.get에는 두 가지 문자열을 넣을 수 있습니다. 'window'를 사용하면 현재 앱에서 사용할 수 있는 영역의 크기를 가져옵니다. 'screen'을 사용하면 전체 화면의 크기를 가져옵니다. iOS에서는 두 크기의 차이가 없지만, 안드로이드에서는 차이가 있습니다. 안드로이드에서 'window'로 크기를 조회했을 때는 상단의 상태 바와 하단의 소프트 메뉴 바 영역을 제외한 크기를 반환합니다.

이 방법은 컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용할 수 있습니다. 화면의 방향을 바꾸거나, 폴더블 디바이스를 사용하면 이 크기가 바뀔 수도 있습니다. 이러한 경우에는 Dimensions.addEventListener와 Dimensions.removeEventListener를 사용해 크기가 바뀌는 이벤트에 대비해야 합니다.

import React, {useState, useEffect} from 'react';
import {View, Dimension} from 'react-native';

function MyComponent() {
  const [dimension, setDimension] = useState(Dimensions.get('window'));
  useEffect(() => {
    const eventListener = ({window, screen}) => {
      setDimension(window);
    }
    Dimensions.addEventListener('change', eventListener);
    return () => {
        Dimensions.removeEventListener('change', eventListener);
    }
  }, []);

  (...)
}