[기업협업 2022/01/27]unitless style과 Dimensions

All dimensions in React Native are unitless

react-native의 StyleSheet는 아래와 같이 단위 없이 표기됩니다.

tinyLogo: {
    width: 50,
    height: 50,
  },

css에서 px단위를 사용하던 것과는 달리, React-native StyleSheet에서는 dp(density independent pixels)를 사용합니다. dp는 상대적인 크기로, 휴대폰이나 태블릿의 액정 크기에 따라 다른 값을 갖게 됩니다(자세한 정보는 여기 ). 그러나 단위를 dp로 작성했다고 해도, 찰떡같이 모든 스크린에 맞춰 개발자가 의도한 대로 척척 변해주는 것은 아닙니다.

🚫 Blocker
device에 따라 크기도 비율도 천차만별인 스크린에 맞춰 스타일을 어떻게 정의하고 그려야 할까요?

Dimensions

React-Native는 Dimensions라는 API를 제공합니다. 이를 통해서 screen이나 window의 넓이와 높이를 가져올 수 있고, 이것을 기준으로 %상대값을 주는 방식이 안전합니다.

컴포넌트 상단에 상수를 지정해주는 영역에서

const { width: viewportWidth, height: viewportHeight } = Dimensions.get("window")
const ITEM_WIDTH = viewportWidth * 0.3333
const ITEM_HEIGHT = viewportHeight * 0.14

와 같이 요소의 넓이와 높이를 window기준 상대값으로 지정해 줄 수 있습니다.

이후 스타일 시트에서 적용시

  items: {
    alignItems: "center",
    justifyContent: "center",
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderColor: "#D1D1D1",
  },

이렇게 적용 가능합니다.

screen vs window

Dimensions.get("screen")과 Dimensions.get("window")를 비교하다 알게 된 깨알 지식. 스크린은 기계가 띄울 수 있는 전체 화면의 크기를 의미합니다. 상태 바, 홈 터치 버튼 등의 영역을 모두 포함합니다.

반면 윈도우는 하나의 어플을 실행했을 때 차지하는 영역을 의미합니다. 일반적으로는 윈도우나 스크린은 유사한 크기를 가지고 있지만, 멀티스크린 기능 같은것을 사용한다면 차이가 발생하겠죠.

결론 : screen > window