Dimensions 이용해서 디바이스마다 다르게 스타일링 하는 부분

Question

선생님 질문이 있습니다!

const deviceHeight = Dimensions.get('screen').height;

...

paddingVertical : deviceHeight > 700 ? 15 : 12;
이런식으로 스타일링 해주셨는데요,

궁금한게 디바이스는 무수히 많은 종류가 있고, 700뿐만 아니라 500, 700, 1000 등등 사이즈마다 다르게 대응해야 할 수도 있을 것 같은데, 상상만 해도 스타일링이 많이 지저분해질 것 같아서요.

혹시 deviceHeight의 수치에 따라 계산식을 만들어서 padding이 비율에 따라 확대/축소될 수 있도록 하는 것도 방법이 될까요?

아니면 웹에서 반응형 레이아웃 대응할 때 미리 사이즈 정의해놓는 것처럼

const deviceSizes = {
  xs: '575px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
};

이런식으로 정해놓고 스타일링할 때 사이즈별로 case 문 만들어서 정의하는게 나을까요?

실무에서 이런 방식도 쓰일런지 궁금합니다!

Kyo · Answer

맞습니다. 저는 디멘션을 이용해서 그런식으로 대응하는 방법도 있다고 설명드린것이고,

사이즈마다 스타일링코드를 넣기는 번거로우므로 비율로 조절하거나, 말씀하신것처럼 브레이크포인트를 잡아서 조절하는것도 좋은 방법이라고 생각합니다. 따로 대응하지않고 모든기기에서 동일하게 height나 width를 고정시키는것도 방법이구요!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. wodnjs306님!

질문 주신 부분에 대해 답변 드리겠습니다. React Native에서 디바이스의 높이에 따라 스타일을 조절하는 방법은 여러 가지가 있습니다. 주로 많이 사용하는 방식 중 하나가, 특정 디바이스 높이를 기준점으로 잡고 스타일을 조건부로 적용하는 방법입니다.
코드에서처럼 700을 기준으로 삼는 이유는, 사용자가 기존에 많이 사용하는 디바이스의 종류나 크기 등을 고려하여 적절한 기준점을 선택하기 때문입니다. 하지만 말씀하신 것처럼, 디바이스 종류가 다양함에 따라 가변적으로 대응할 필요가 있을 때가 많습니다.

디바이스 크기에 따라 스타일을 더 유연하게 적용하고 싶다면, 비율 기반의 계산식을 활용하는 것도 좋은 방법입니다. 예를 들어, 디바이스 높이에 따라 패딩 값을 직접 계산하여 설정하는 방법입니다. 다음과 같은 접근 방식이 있을 수 있습니다:

const baseHeight = 700; // 기준이 되는 높이
const dynamicPadding = (deviceHeight / baseHeight) * 15; // 비율에 따른 패딩 계산

paddingVertical: dynamicPadding;

이렇게 하면, 디바이스의 전체 크기에 따라 패딩 값이 자연스럽게 조정될 수 있습니다. 실무에서도 이와 같은 접근법을 사용하는 경우가 있습니다. 다만, 이 방법이 항상 좋은 결과를 보장하지는 않으므로, 적절한 기준을 찾고 상황에 맞게 조절하는 것이 중요합니다.

관련해서 다른 질문과 답변이 있어서 참고하시면 좋을 URL은 다음과 같습니다:
- deviceHeight > 700 기준점에 대한 이유

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Dimensions 이용해서 디바이스마다 다르게 스타일링 하는 부분