Skip to main content

참고 자료

React Native에는 세 가지 종류의 그림자 API가 있다:

  • boxShadow: View 스타일 속성으로, 동일한 이름의 웹 스타일 속성과 스펙을 준수하는 구현체이다.
  • dropShadow: filter View 스타일 속성의 일부로 제공되는 특정 필터 함수이다.
  • 다양한 shadow 속성 (shadowColor, shadowOffset, shadowOpacity, shadowRadius): 이들은 플랫폼 수준 API에서 제공하는 네이티브 속성과 직접 매핑된다.

dropShadow와 boxShadow의 차이점은 다음과 같다:

  • dropShadow는 filter의 일부로 존재하지만, boxShadow는 독립적인 스타일 속성이다.
  • dropShadow는 알파 마스크이므로, 양수 알파 값을 가진 픽셀만 그림자를 "드리운다". 반면 boxShadow는 엘리먼트의 내용과 관계없이 테두리 박스 주변에 그림자를 드리운다(단, inset인 경우 제외).
  • dropShadow는 Android에서만 사용 가능하지만, boxShadow는 iOS와 Android 모두에서 사용 가능하다.
  • dropShadow는 boxShadow처럼 inset으로 설정할 수 없다.
  • dropShadow는 boxShadow와 달리 spreadDistance 인자를 지원하지 않는다.

boxShadow와 dropShadow는 일반적으로 shadow 속성보다 더 많은 기능을 제공한다. 하지만 shadow 속성은 네이티브 플랫폼 수준 API와 직접 매핑되므로, 단순한 그림자만 필요한 경우 이 속성을 사용하는 것을 권장한다. 단, shadowColor는 Android와 iOS 모두에서 동작하지만, 나머지 shadow 속성은 iOS에서만 동작한다는 점에 유의해야 한다.

Props​

boxShadow​

자세한 내용은 View Style Props 문서를 참고한다.

dropShadow
Android
​

문서는 View Style Props에서 확인할 수 있다.

shadowColor​

드롭 쉐도우의 색상을 설정한다.

이 속성은 Android API 28 이상에서만 작동한다. 더 낮은 Android API에서 비슷한 기능을 사용하려면 elevation 속성을 활용한다.

타입
color

shadowOffset
iOS
​

드롭 섀도우의 오프셋을 설정한다.

타입
객체: {width: number,height: number}

shadowOpacity
iOS
​

그림자의 투명도를 설정한다. 이 값은 색상의 알파(alpha) 컴포넌트와 곱해진다.

타입
number

shadowRadius
iOS
​

드롭 섀도우의 흐림 반경을 설정한다.

타입
number