[2306.11]TIL

elevation

React Native에서 'elevation'은 요소의 Z 축 방향으로의 높이를 지정하는 속성입니다. 이 속성은 플랫폼별로 다른 방식으로 렌더링되며, iOS와 Android에서 다른 시각적 효과를 생성할 수 있습니다.

Android에서 'elevation'을 사용하면 요소가 그림자 효과를 가지며, 요소가 화면 위에 떠있는 것처럼 보이게 됩니다. 이를 통해 사용자에게 요소의 중요성을 시각적으로 전달할 수 있습니다. 'elevation' 값은 양수로 설정되며, 값이 클수록 그림자가 더 진하게 표현됩니다.

iOS에서는 'elevation' 대신 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius'와 같은 속성을 사용하여 그림자 효과를 지정합니다. 따라서 iOS에서는 'elevation'을 직접 사용하지 않고, 대신 해당 속성들을 조정하여 그림자를 만들어야 합니다.

React Native에서 'elevation'을 사용하려면 해당 요소의 스타일에 'elevation' 속성을 추가하고 원하는 값을 설정하면 됩니다. 예를 들어:

jsx
Copy code
<View style={{ elevation: 3 }}>
  <Text>React Native Elevation</Text>
</View>

위의 예제에서는 elevation 값으로 3을 설정하여 요소에 그림자 효과를 부여하고 있습니다. 이렇게 설정된 요소는 Android에서는 그림자가 적용되어 떠있는 것처럼 보이고, iOS에서는 해당 플랫폼의 그림자 속성을 통해 그림자 효과를 구현할 것입니다.