React Native에서 반응형 UI 구현하기 - useWindowDimensions vs. Dimensions

·
4 min read

React Native에서는 화면 크기에 따라 UI 요소의 크기나 위치를 조정하는 일이 자주 발생한다.

이번 글에서는 그런 반응형 UI를 구현할 때 주로 사용되는 두 가지 도구, Dimensions API와 useWindowDimensions 훅의 차이점을 정리해본다.

Dimensions API란?

import { Dimensions } from 'react-native';

const deviceWidth = Dimensions.get('window').width;
import { Dimensions } from 'react-native';

const deviceWidth = Dimensions.get('window').width;
  • “window”는 상태 표시줄을 제외한 화면의 너비와 높이를 의미한다.
  • 안드로이드에서는 “screen”을 사용하면 상태 표시줄까지 포함한 값을 가져올 수 있다.

이 값을 활용해서 조건부 스타일을 적용할 수 있다.

padding: deviceWidth < 380 ? 12 : 24,
fontSize: deviceWidth < 380 ? 28 : 36,
padding: deviceWidth < 380 ? 12 : 24,
fontSize: deviceWidth < 380 ? 28 : 36,

이 방식은 간단하지만 한 가지 주의할 점이 있다.

Dimensions.get()은 컴포넌트가 처음 렌더링될 때의 값만 가져오며, 화면 회전이나 리사이즈가 발생해도 자동으로 갱신되지 않는다.

변화 감지를 수동으로 처리하고 싶다면?

Dimensions.addEventListener('change', ...)를 사용하면, 화면 회전이나 창 크기 변화 등 크기가 바뀌는 이벤트를 수동으로 감지할 수도 있다.

useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({ window }) => {
    console.log('New width:', window.width);
  });

  return () => subscription?.remove();
}, []);
useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({ window }) => {
    console.log('New width:', window.width);
  });

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

하지만 이 방식은 값이 변경돼도 UI가 자동으로 갱신되지 않기 때문에, React의 상태 기반 구조와는 어울리지 않는다.

화면 회전에 대응하려면? useWindowDimensions

React Native 공식 문서에서도 useWindowDimensions를 권장 API(preferred API)로 소개하고 있다.

import { useWindowDimensions } from 'react-native';

const { width, height } = useWindowDimensions();
import { useWindowDimensions } from 'react-native';

const { width, height } = useWindowDimensions();
  • 이 훅은 렌더링 시점마다 화면 크기를 최신 상태로 제공한다.
  • 별도의 이벤트 처리가 필요 없고, 화면 회전이나 폴더블 디바이스에도 자연스럽게 대응된다.

예를 들어, 이미지의 크기를 화면 크기에 따라 동적으로 조정할 수 있다.

let imageSize = 300;

if (width < 300) {
  imageSize = 150;
}

if (height < 400) {
  imageSize = 80;
}

const imageStyle = {
  width: imageSize,
  height: imageSize,
  borderRadius: imageSize / 2,
};
let imageSize = 300;

if (width < 300) {
  imageSize = 150;
}

if (height < 400) {
  imageSize = 80;
}

const imageStyle = {
  width: imageSize,
  height: imageSize,
  borderRadius: imageSize / 2,
};

이렇게 하면 작은 화면이나 가로 모드에서도 UI가 깨지지 않고 자연스럽게 조정된다.

언제 어떤 걸 써야 할까?

상황추천 도구
화면이 동적으로 바뀌는 경우 (회전, 폴더블 등)useWindowDimensions
고정된 크기 기준으로 스타일을 미리 설정할 때Dimensions

정리하며

처음엔 Dimensions만 사용해서 반응형 처리가 되는 줄 알았는데, 실제로 앱을 가로로 돌렸을 때 레이아웃이 깨져서 당황했다. useWindowDimensions를 알고 나서야 방향 전환에도 대응할 수 있었고, 이후에는 이미지나 마진 등을 더 유연하게 조정할 수 있었다.

참고 자료