두 번째 방법은 useWindowDimensions Hook을 사용하는 것입니다. Dimensions.get과 달리 화면 크기가 바뀌는 상황에 우리가 직접 대비할 필요가 없습니다. Hook 형태로 사용하기 때문에 값이 바뀌면 컴포넌트에서 자동으로 반영됩니다.

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

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

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

두 번째 방법이 작성해야 할 코드가 더 적어서 간단하므로, 여기서는 이 방법을 사용하겠습니다. SearchHeader 컴포넌트에서 방금 배운 useWindowDimensions로 너비를 직접 계산해 설정해봅시다.

components/SearchHeader.js

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

function SearchHeader() {
  const {width} = useWindowDimensions();
  return <View style={[styles.block, {width: width - 32, height: 24}]} />;
}

const styles = StyleSheet.create({
  block: {
    backgroundColor: 'blue',
  },
});

export default SearchHeader;

Text 대신 View를 사용하고 높이는 24, 너비는 전체 너비에 32를 뺀 값을 설정해줬습니다. 32를 뺀 이유는 양 옆에 여백이 16씩 있기 때문입니다.

다음과 같이 파란색 영역이 헤더에 꽉 찬 상태로 잘 나타났나요?

▲ 그림 7-3 SearchHeader 너비 직접 계산