[react-native] useWindowDimensions

 React Native에서 useWindowDimensions 훅은 현재 화면의 너비와 높이를 가져오는 데 사용된다.

 

이 훅은 컴포넌트가 렌더링될 때 화면의 크기를 제공하며, 화면 크기가 변경될 때마다 이를 감지하여 컴포넌트가 적절히 반응하도록 할 수 있다. 이는 반응형 디자인을 구현할 때 매우 유용하다.

 

useWindowDimensions는 Dimensions API와 비슷하지만, 컴포넌트 기반의 훅 형태로 제공되어 더 간단하고 직관적인 사용이 가능하다는 장점이 있다.

 

화면의 방향이 바뀌거나 다양한 화면 크기를 가진 장치에서의 호환성을 고려할 때, 이 훅을 사용하면 효과적으로 UI를 조정할 수 있다.

 

예제 코드와 함께 알아보자.

---

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useWindowDimensions } from 'react-native';

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

  return (
    <View style={styles.container}>
      <Text>화면 너비: {width}</Text>
      <Text>화면 높이: {height}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ExampleComponent;

 

위 코드에서 useWindowDimensions를 호출하여 현재 화면의 너비와 높이를 width와 height 변수에 각각 저장하고 있다.

 

이후, 이 값을 Text 컴포넌트를 사용하여 화면에 출력한다. 이 방법을 통해 개발자는 현재 화면 크기에 따라 다양한 스타일이나 레이아웃을 적용할 수 있다.

 

useWindowDimensions 훅을 사용할 때 주의해야 할 점은, 이 훅이 반환하는 값이 렌더링 사이클에 따라 업데이트되기 때문에, 성능 최적화를 고려하여 불필요한 렌더링이 발생하지 않도록 주의해야 한다는 것이다.