[ReactNative] dp 단위에 대하여

 모바일 기기는 기종에 따라 화면의 크기나 해상도의 차이가 나는 경우가 많으며, CSS나 DOM 기능을 사용하지 않습니다. 때문에 ReactNative는 일반적인 웹 개발에서 쓰이는 길이 단위와 다른 단위를 사용합니다.

 

 보통 웹에서 길이를 지정할 때는 px과 같은 픽셀 단위나 em & rem과 같은 텍스트 크기를 기준으로 한 단위를 사용합니다. 하지만 ReactNative는 해상도(DPI)에 따라 자동으로 스케일되는 dp(density-independent pixel)를 숫자 단위로 사용합니다.

 

	웹	모바일
DOM	O	X
스타일	CSS	Native
단위	px, em, rem	dp

 

 이 때문에 Native StyleSheet를 tailwind의 형태로 바꿀 일이 있을 때 한 가지 신경써야 하는 부분이 있는데, tailwind의 스타일 단위는 dp를 사용하지 않는다는 것입니다. tailwind는 rem을 단위로 계산되기 때문에, StyleSheet에서 정의한 숫자를 그대로 가져다 쓰면 크기가 변하게 됩니다.

// 방법 1. StyleSheet
const styles = StyleSheet.create({
    sampleStyle: { width: 64 }
})

{<View style={styles.sampleStyle} />}  // 64dp

// 방법 2. tailwind
{<View className="w-64" />}  // 64 * 0.25rem = 16rem
// 만약 1rem = 16px 이라면, 최종적으로는 256px => 256dp

// => 크기가 4배로 불어남!

그래서 tailwind에서도 원래 의도한 크기대로 사용하려면, 대괄호[]로 숫자를 감싸주어야 합니다.

<View className="w-[64]" />