[React Native] Dimensions API

Dimensions API

들어가며

• 리액트 네이티브(React Native)의 내장 API 중 하나인 Dimensions API에 대해 간단히 정리해본다
• Dimensions API를 이용하여 현재 디바이스의 화면 정보를 가져올 수 있다.

 

Dimensions API

개념

• 리액트 네이티브(React Native)에서 기본으로 제공하는 내장 API
• 디바이스의 화면 크기(너비(Width)와 높이(Height)) 정보를 가져오는 데 사용된다.
  • 반응형 UI 구성에 활용할 수 있다.
  • 이러한 정보를 이용하여 폰트 크기(Font Size), 패딩(Padding), 마진(Margin) 등을 디바이스 화면 크기에 따라 조정할 수 있다.

 

사용하면 좋은 경우

• 다양한 화면 크기에 맞춰 폰트, 간격, 크기를 조절할 때
• 미디어 쿼리(Media Query)처럼 반응형 디자인을 구현할 때
• 특정 해상도 이하에서만 UI를 간소화하거나 조정하고 싶을 때

 

사용 방법

모듈 불러오기

import { Dimensions } from 'react-native';

 

화면 정보 가져오기

// 상태바(Status Bar)를 제외한 부분
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

// 상태바(Status Bar)를 포함한 부분
const screenWidth = Dimensions.get('screen').width;
const screenHeight = Dimensions.get('screen').height;

 

• @Dimensions.get()@ 메서드는 @window@ 또는 @screen@을 인자로 받는다.

인자	설명
@window@	상태바(Status Bar)를 제외한 실제 UI가 그려지는 화면 크기 (일반적으로 사용)
@screen@	상태바(Status Bar)를 포함한 전체 화면 크기

 

• @Dimensions.get()@ 메서드는 다음의 정보를 포함한 객체(Object)를 반환한다.

{
  width: number,
  height: number,
  scale: number,
  fontScale: number
}

 

값	설명
@width@	픽셀 단위의 화면 너비
@height@	픽셀 단위의 화면 높이
@scale@	픽셀 밀도 (디바이스의 해상도 스케일, DPI)
@fontScale@	사용자 설정에 따른 폰트 스케일링 비율

 

화면 회전에 대응하기

방법 ① : Dimensions API와 이벤트 리스너(Event Listener) 함께 사용하기

• Dimensions API는 기본적으로 앱이 실행될 때의 크기만 가져온다.
  • 앱 시작 시 @Dimensions.get()@을 호출해 가져온 값은 정적(Static)이다.
• 화면 회전 등으로 크기가 바뀌어도 자동 갱신 되지 않기 때문에 이벤트 리스너(Event Listener)를 통해 수동으로 감지하도록 하게 한다.

useEffect(() => {
  const onChange = ({ window }) => {
    console.log('width:', window.width);
  };

  const subscription = Dimensions.addEventListener('change', onChange);

  return () => subscription?.remove();
}, []);

 

React Native 0.65부터는 @addEventListener@와 @removeEventListener@ 대신, 구독 객체를 반환하고 @remove()@로 이벤트 리스너를 해제하는 방식을 사용한다.

 

방법 ② : useWindowDimensions 훅 사용하기

• 리액트 네이티브의 기본 내장 훅인 @useWindowDimensions@ 훅을 사용하여 현재 화면의 @width@와 @height@ 값을 실시간으로 가져올 수 있다.

import { useWindowDimensions } from 'react-native';

const MyComponent = () => {
  const { width, height } = useWindowDimensions();

  return (
    <View>
      <Text>현재 너비: {width}</Text>
      <Text>현재 높이: {height}</Text>
    </View>
  );
};

 

• @useWindowDimensions@ 훅 또한 다음 값을 가진 객체(Object)를 반환한다.

{
  width: number,       // 현재 화면의 너비 (px)
  height: number,      // 현재 화면의 높이 (px)
  scale: number,       // 디바이스의 픽셀 비율 (DPI 비율)
  fontScale: number    // 폰트 스케일 비율
}

 

예제 코드

const { width } = Dimensions.get('window');
// 또는 const windowWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    padding: width < 380 ? 12 : 24,
    fontSize: width < 380 ? 28 : 36,
  }
});

 

참고 사이트

Dimensions · React Native

useWindowDimensions · React Native