[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