React Native 스크린 크기를 구해보자! (Dimension)

React Natvie 에서 width, height의 레이아웃을 사용자마다의 스크린 기준으로 개발하고 싶을 때가 있을 것이다.

 

스크린의 크기를 가져오기 위해서는 Dimension이라는 React Natvie 문서에서 제공해주는 API를 사용해야한다. 

import { Dimensions } from 'react-native';

import로 해당 라이브러리를 가져와보자.

 

가져온 다음 사용하는 방법은 간단하다.

const { width, height } = Dimensions.get("window");

window의 width와 height를 가져오는 문구이다. 

다양한 방식으로도 표현할 수 있다. 

const { width: SCREEN_WIDTH } = Dimensions.get("window");

이런 식으로 해서 window의 width를 가져오는데 SCREEN_WIDTH라는 변수를 사용할거야! 

라고 정의할 수도 있다.

const SCREEN_WIDTH = Dimensions.get("window").width;

혹은 같은 표현이라도 이런 식으로 풀어서 표현할 수도 있을 것이다.

 

사용하는 형식은 내가 보기 편한 것으로 사용하면 된다.