[React-Native] 스타일 관련 웹이랑 다른 점 / 기타 스타일 관련 정리

width

• width를 별도로 설정하지 않고 내가 갖고 있는 요소의 너비만큼만 차지하게 하려는 경우:
• 해결법
  • paddingHorizontal 적용
    • paddingRight: 1 등으로 아주 약간이라도 여백을 줘야 함.
  • alignSelf 적용

overflow

• 리액트 네이티브의 View 컴포넌트는 기본적으로 자식 요소를 자신의 영역 내로 제한하는 특성이 있다.
• overflow 속성의 기본값은 플랫폼에 따라 다르다:
  • iOS: 기본값은 'visible'
  • Android: 기본값은 'hidden'
  • 주의할 점:
    1. Android에서는 overflow: 'visible'이 항상 예상대로 동작하지 않을 수 있다.
       1. Android에서 툴팁 등의 디자인을 적용하기 위해 position: absolute를 적용하더라도, absolute인 요소가 노출되게 하기 위해서는 컨테이너의 크기를 absolute인 요소를 포함한 크기로 잡아서 잘리지 않게 해야 하는 듯 하다.
    2. 음수 margin이나 absolute positioning을 사용할 때는 overflow 설정이 제대로 적용되지 않을 수 있다.
    3. ScrollView 내부의 요소에 대해서는 overflow 설정이 무시될 수 있다.
    4. overflow: 'scroll' 을 적용해야 하는 경우, ScrollView 컴포넌트를 사용하는 것을 더 권장.

position

• 리액트 네이티브에서도 position relative와 absolute의 관계는 비슷하지만, 약간 다르게 동작한다.
• 리액트 네이티브에서는 가장 가까운 non-static positioned 조상(relative, absolute) 기준이 아니라, 기본적으로 root 컨테이너를 기준으로 위치가 잡힌다.
• 부모 컨테이너의 크기나 위치가 명확하게 정의되어 있어야 한다는 점이 웹과의 주요 차이점이다.
  • 부모에 position: 'relative'만 주는 것으로는 적용되지 않고, 반드시 부모 컨테이너에 width / height가 있어야 한다.
  • 또는 부모 컨테이너에 flex 값이 지정되어 있어야 한다.

transform을 사용한 요소 중앙 배치

• 웹에서 주로 사용하는 transform: translate(-50%) 속성 사용 불가.
• 예를 들어 가로 중앙 배치의 경우, left: 50%을 적용했으면 transform에서는 width의 절반값만큼 음수로 지정해줘야한다.
  • ex) transfom: [{ translateX: -6 }]

말줄임처리

• 웹과는 달리 white-space: nowrap등은 지원되지 않는다.
• 텍스트를 줄바꿈 없이 한 줄로 나오게 하려면, flexDirection: row / flexWrap: nowrap을 적용해야 한다.
• 그리고 <Text> 컴포넌트의 속성인 numberOfLines, ellipsizeMode를 사용해서 말줄임 처리를 해야 한다.
  • <Text numberOfLines={2} ellipsizeMode={tail} />
    • tail: 끝부분에 말줄임 표시
    • head: 시작 부분
    • middle: 중간
    • clip: 말줄임 없이 잘라내기

그림자 적용

• 예를 들어 box-shadow: 0px 6px 15px 0px rgba(37, 124, 255, 0.50);이면 다음과 같이 적용한다.
• ...Platform.select({ ios: { shadowColor: theme.color.primary.blue1, shadowOpacity: 0.5, shadowOffset: { width: 0, height: 6 }, shadowRadius: 15, }, android: { shadowColor: theme.color.primary.blue1, elevation: 8, }, }),
• 참고로 Android의 elevation과 CSS의 box-shadow의 blur-radius는 직접적인 1:1 매핑 관계가 없다.
• elevation은 안드로이드 Material Design의 개념으로, 0부터 24 사이의 값을 가지며 요소가 표면으로부터 얼마나 "떠 있는지"를 나타낸다. 높이가 높을수록 그림자가 더 크고 부드러워진다.
• elevation에 대한 대략적인 가이드라인이 있긴 하지만, 절대적으로 이 값으로 적용된다는 것은 아니다. (그냥 눈으로 보면서 맞춰야함)
  • blur-radius 1-4px → elevation 2-3
  • blur-radius 5-8px → elevation 4-5
  • blur-radius 9-12px → elevation 6-7
  • blur-radius 13-16px → elevation 8-9
  • blur-radius 17-20px → elevation 10-11
  • blur-radius 21px 이상 → elevation 12 이상

기타 적용되지 않는 속성들

• border 단축속성 사용 불가 (borderWidth, borderStyle, borderColor 각각 별도로 작성해야 함)
• width: fit-content 사용 불가 → 상기한 대로 약간의 여백을 주거나 alignSelf 사용해야 함
• line-height 퍼센트로 사용 불가
• CSS 선택자 (:hover, :active, :focus 등) 사용 불가
• CSS 애니메이션 (@keyframes) 사용 불가
• CSS Grid 사용 불가
• background-image 사용 불가
• 줄바꿈 태그 <br> 사용 불가 → {’/n} 사용하거나 줄마다 별도의 텍스트 컴포넌트로 감싸줘야함.