React Native 화면 크기 조회하기

리액트 네이티브에서 화면 크기를 dp 단위로 가져오는 방법은 두 가지가 있다.

 

1. Dimensions.get

import {Dimentsions} from 'react-native';
const { width, height } from Dimensions.get('window');

Dimensions.get에는 두 가지 문자열을 넣을 수 있다. 

• window : 현재 앱에서 사용할 수 있는 영역의 크기를 가져온다.
• screen : 전체 화면의 크기를 가져온다.

iOS에서는 두 크기의 차이가 없지만, 안드로이드에서 window로 크기를 조회했을 때는 상단의 상태 바와 하단의 소프트 메뉴 바 영역을 제외한 크기를 반환한다.

 

이 방법은 컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용할 수 있다. 

화면의 방향을 바꾸거나, 폴더블 디바이스를 사용하면 이 크기가 바뀔 수도 있으므로 Dimensions.addEventListener와 Demensions.removeEventListener를 사용해 크기가 바뀌는 이벤트에 대비해야 한다.

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

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

 

2. useWindowDimensions Hook

Dimensions.get과 달리 화면 크기가 바뀌는 상황에 직접 대비할 필요는 없다.

Hook 형태로 사용하기 떄문에 값이 바뀌면 컴포넌트에서 자동으로 반영된다.

import React from 'react';
import {useWindowDimensions} from 'react-native';

function MyComponenet() {
    const {width, height} = useWindowDimensions();
}

이 방법은 함수 컴포넌트 내부에서만 사용 가능하며, 전체 화면의 크기를 가져오는 기능은 없기 때문에 만약 전체 화면의 크기를 가져와야 한다면 Dimensions.get('screen')을 사용해야 한다.