React Native Flexbox – 백분율을 사용하여 반응형 그리드 생성하는 방법
React Native를 사용하여 iOS에서 작업하다 보면 flex 스타일링과 관련된 제한 사항, 특히 반응형 동작에 대해 제한을 만날 수 있습니다. 이 글에서는 React Native의 flexbox를 사용하여 특정 백분율의 너비를 가진 반응형 카드 그리드를 생성하는 방법을 알아보겠습니다.
도전 과제: 반응형 카드 그리드 생성하기
예를 들어, 각 카드가 뷰 너비의 50%를 차지하고 (여백과 패딩은 제외) 매 두 개의 카드마다 줄바꿈하는 뷰를 표시해야 할 경우를 가정해 봅시다. 이 레이아웃을 오직 React Native 스타일만 사용하여 구현하려면 조금 까다로울 수 있습니다. 다행히도 이 도전을 극복하기 위한 몇 가지 해결책이 있습니다.
해결책 1: 백분율 헬퍼 사용
하나의 접근 방식은 뷰포트 너비와 높이에 대한 맞춤형 백분율 헬퍼를 정의하는 것입니다. 이는 React Native의 Dimensions 모듈을 사용하여 생성할 수 있습니다. 다음은 예시입니다:
import { Dimensions } from 'react-native';
function vw(percentageWidth) {
return Dimensions.get('window').width * (percentageWidth / 100);
}
function vh(percentageHeight) {
return Dimensions.get('window').height * (percentageHeight / 100);
}
반응형 그리드를 생성하기 위해 각 카드의 적절한 크기를 계산할 수 있습니다. 여기서는 여백과 뷰포트 크기를 고려합니다:
const COLUMNS = 2;
const MARGIN = vw(1);
const SPACING = (COLUMNS + 1) / COLUMNS * MARGIN;
const grid = {
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'flex-start'
};
const cell = {
marginLeft: MARGIN,
marginTop: MARGIN,
width: vw(100) / COLUMNS - SPACING
}
다음으로, 그리드 내에 카드를 렌더링할 수 있습니다:
return (
<View style={grid}>
{this.props.cards.map(card => <View style={cell} />)}
</View>
)
이 기법은 아이템 수가 알려진 제한적인 경우에 가장 효과적으로 작동합니다. 더 큰 데이터셋의 경우 성능을 높이기 위해 ListView 컴포넌트를 사용하고 데이터를 수동으로 행으로 분할하는 것이 권장됩니다.
해결책 2: React Native 백분율 지원 활용
React Native는 이미 내장된 백분율 지원을 가지고 있어 구현을 간소화할 수 있습니다. 다음은 예시입니다:
<View style={[style.parent]}>
<View style={[style.child, { backgroundColor: '#996666' }]} />
<View style={[style.child, { backgroundColor: '#339966' }]} />
<View style={[style.child, { backgroundColor: '#996633' }]} />
<View style={[style.child, { backgroundColor: '#669933' }]} />
</View>
var style = StyleSheet.create({
parent: {
width: '100%',
flexDirection: 'row',
flexWrap: 'wrap'
},
child: {
width: '48%',
margin: '1%',
aspectRatio: 1,
}
})
부모 컨테이너의 너비를 ‘100%’로 설정하고 flexDirection 및 flexWrap 속성의 조합을 사용하여 원하는 반응형 그리드 레이아웃을 구현할 수 있습니다.
해결책 3: justifyContent ‘space-between’ 사용
다른 접근 방식은 justifyContent 속성을 ‘space-between’ 값으로 사용하여 원하는 카드 그리드 레이아웃을 생성하는 것입니다. 다음은 예시입니다:
<View style={styles.feed}>
<View style={styles.card} />
<View style={styles.card} />
<View style={styles.card} />
<View style={styles.card} />
</View>
const styles = StyleSheet.create({
feed: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
padding: 16,
justifyContent: 'space-between'
},
card: {
backgroundColor: 'white',
width: '48%',
aspectRatio: 1,
marginBottom: 16
}
})
부모 컨테이너에 justifyContent: ‘space-between’를 적용하고 각 카드의 너비와 aspectRatio 속성을 조정함으로써 카드 사이에 균일한 간격을 가진 반응형 그리드 레이아웃을 구현할 수 있습니다.
해결책 4: flexBasis 접근 방식
또 다른 방법은 flexBasis 속성을 사용하여 flex 컨테이너 내 각 카드의 너비 백분율을 정의하는 것입니다:
<View style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
{array?.map((item, itemIndex) => {
return (
<View style={{
flexBasis: '50%',
height: OPTIONAL,
width: OPTIONAL
}}>
{/* YOUR CONTENT HERE */}
</View>
)
})}
</View>
각 카드에 flexBasis: ‘50%’를 설정함으로써 그리드에 대한 원하는 50%의 너비를 얻을 수 있습니다.
결론
React Native에서 특정 백분율 너비를 가진 반응형 카드 그리드를 생성하는 것은 어려운 과제일 수 있습니다. 그러나 위에서 언급한 기술을 구현함으로써 손쉽게 원하는 레이아웃을 구현할 수 있습니다. 맞춤형 백분율 헬퍼를 사용하거나 React Native의 내장된 백분율 지원을 활용하거나 flex 속성을 조작하는 등 여러 가지 옵션이 있습니다. 요구 사항에 가장 적합한 접근 방식을 선택하여 React Native 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.
