React Native Academy · 강의

반응형 카드 격자 만들기

Flexbox 줄바꿈과 백분율 너비를 적용해 작은 휴대폰과 큰 태블릿 모두에서 올바르게 보이는 2열 카드 격자를 만듭니다.

레슨 4/413개 단계

반응형 카드 격자 만들기은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Card Grid Architecture Overview

A card grid is one of the most common UI patterns in mobile apps — from product catalogs to photo galleries and app dashboards. In React Native, you build it with a combination of flexDirection: 'row', flexWrap: 'wrap', width percentages, and the gap property. The challenge is making the grid look correct on small iPhones (320–375pt wide), large Android phones (392–430pt), and tablets (768pt+). By computing card dimensions from the screen width, the grid adapts to every device size automatically.

// The pattern: percentage-width cards in a wrapping row
import { View, useWindowDimensions } from 'react-native';

const COLUMNS = 2;
const GAP = 12;
const PADDING = 16;

export default function CardGrid({ items }) {
  const { width } = useWindowDimensions();
  const cardWidth = (width - PADDING * 2 - GAP * (COLUMNS - 1)) / COLUMNS;

  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: GAP, padding: PADDING }}>
      {items.map(item => <Card key={item.id} width={cardWidth} data={item} />)}
    </View>
  );
}

Calculating Card Width Precisely

To fit exactly N columns with consistent gutters, calculate card width as: (containerWidth - horizontalPadding * 2 - gap * (N - 1)) / N. For two columns with 16pt padding on each side and 12pt gap: (screenWidth - 32 - 12) / 2. This formula ensures the cards and gutters sum exactly to the container width, producing a pixel-perfect grid without rounding artifacts. Using useWindowDimensions means this recalculates when the screen width changes (e.g., device rotation or iPad split view).

import { useWindowDimensions } from 'react-native';

function useGridLayout({ columns = 2, padding = 16, gap = 12 } = {}) {
  const { width } = useWindowDimensions();
  const cardWidth = (width - padding * 2 - gap * (columns - 1)) / columns;
  return { cardWidth, numColumns: columns };
}

// Usage:
function MyGrid() {
  const { cardWidth } = useGridLayout({ columns: 2, padding: 16, gap: 12 });
  // cardWidth updates automatically on rotation
  return <>{/* render cards with width: cardWidth */}</>;
}

Building the Card Component

Each grid card is a self-contained component with an image, title, and optional subtitle. Use borderRadius for rounded corners, a shadow or elevation for depth, and overflow: 'hidden' to clip the image to the card shape. The image height is set with aspectRatio so it scales proportionally to the card width. Accept the card width as a prop from the grid parent — the card doesn't need to know about the screen; it just fills whatever width it's given.

import { View, Text, Image, StyleSheet } from 'react-native';

export default function ProductCard({ item, width }) {
  return (
    <View style={[styles.card, { width }]}>
      <Image
        source={{ uri: item.imageUri }}
        style={styles.image}
      />
      <View style={styles.info}>
        <Text style={styles.title} numberOfLines={2}>{item.name}</Text>
        <Text style={styles.price}>${item.price.toFixed(2)}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 14, overflow: 'hidden', elevation: 3, shadowColor: '#000', shadowOffset: {width:0,height:2}, shadowOpacity:0.08, shadowRadius:8 },
  image: { width: '100%', aspectRatio: 1, backgroundColor: '#f0f0f0' },
  info: { padding: 10 },
  title: { fontSize: 13, fontWeight: '600', color: '#222', lineHeight: 18 },
  price: { fontSize: 15, fontWeight: 'bold', color: '#4f86f7', marginTop: 4 },
});

FlatList with numColumns for Grids

For large datasets, use FlatList with the numColumns prop instead of a wrapping row. FlatList virtualizes rendering — only cards visible on screen are in memory, making scrolling smooth with thousands of items. Set numColumns={2} and provide a columnWrapperStyle for consistent row spacing. The key prop from keyExtractor is critical for performance. The downside: changing numColumns at runtime requires unmounting and remounting the list — use the same number of columns for the full session.

import { FlatList, useWindowDimensions } from 'react-native';
import ProductCard from './ProductCard';

export default function ProductGrid({ products }) {
  const { width } = useWindowDimensions();
  const cardWidth = (width - 32 - 12) / 2;

  return (
    <FlatList
      data={products}
      numColumns={2}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => (
        <ProductCard item={item} width={cardWidth} />
      )}
      columnWrapperStyle={{ gap: 12, paddingHorizontal: 16 }}
      contentContainerStyle={{ paddingVertical: 16, gap: 12 }}
      showsVerticalScrollIndicator={false}
    />
  );
}

Handling Odd Item Counts (Last Row)

When your grid has an odd number of items, the last row will have a card without a matching sibling. By default, this lone card stretches to fill the full row width (because of Flexbox stretch). To keep the orphan card the same width as other cards, give each card a fixed calculated width rather than relying on Flexbox stretching. In FlatList, you can also add a transparent spacer item to pad the last row. Another option is ListFooterComponent with a fixed height to prevent the last card from appearing stretched near the bottom of the screen.

import { FlatList, View } from 'react-native';
import ProductCard from './ProductCard';

// Add a transparent placeholder if odd count
function padToEven(data) {
  if (data.length % 2 !== 0) {
    return [...data, { id: '__placeholder__', _placeholder: true }];
  }
  return data;
}

export default function EvenGrid({ products, cardWidth }) {
  const paddedData = padToEven(products);
  return (
    <FlatList
      data={paddedData}
      numColumns={2}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        item._placeholder
          ? <View style={{ width: cardWidth }} />
          : <ProductCard item={item} width={cardWidth} />
      )}
      columnWrapperStyle={{ gap: 12, paddingHorizontal: 16 }}
    />
  );
}

Category Header Above the Grid

Real app grids often show a category header — a title, a 'See all' link, and optional horizontal filter pills — above the product cards. The most flexible approach is to use FlatList's ListHeaderComponent prop, which renders above the scrollable content and scrolls with it. This keeps the header inside the virtualized scroll without needing a separate ScrollView wrapper. For multiple categories with their own grids, use SectionList with section headers and a custom renderSectionHeader.

import { FlatList, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function GridHeader({ title, onSeeAll }) {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>{title}</Text>
      <TouchableOpacity onPress={onSeeAll}>
        <Text style={styles.seeAll}>See all</Text>
      </TouchableOpacity>
    </View>
  );
}

// Use as:
<FlatList
  ListHeaderComponent={<GridHeader title='Popular' onSeeAll={() => {}} />}
  data={products}
  numColumns={2}
  // ...
/>

const styles = StyleSheet.create({
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12 },
  title: { fontSize: 20, fontWeight: 'bold', color: '#111' },
  seeAll: { fontSize: 14, color: '#4f86f7' },
});

Adaptive Columns for Tablets

For a grid that shows 2 columns on phones and 3 or 4 on tablets, compute the number of columns dynamically from the screen width. Because FlatList's numColumns cannot change after mounting, the safest approach is to include the column count in the FlatList's key prop: key={numColumns.toString()}. When the column count changes (e.g., device rotated into landscape on a tablet), FlatList unmounts and remounts with the new layout. This is a known limitation — accept the brief remount for a correct adaptive grid.

import { FlatList, useWindowDimensions } from 'react-native';
import ProductCard from './ProductCard';

export default function AdaptiveGrid({ products }) {
  const { width } = useWindowDimensions();
  const numColumns = width >= 768 ? 3 : 2;
  const gap = 12, padding = 16;
  const cardWidth = (width - padding * 2 - gap * (numColumns - 1)) / numColumns;

  return (
    <FlatList
      key={numColumns.toString()} // remount on column change
      data={products}
      numColumns={numColumns}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <ProductCard item={item} width={cardWidth} />}
      columnWrapperStyle={{ gap, paddingHorizontal: padding }}
      contentContainerStyle={{ paddingVertical: 16, gap }}
    />
  );
}

Loading Skeleton Grid

While product data loads from an API, show a skeleton grid of placeholder cards to prevent an empty white screen. Use a fixed array of placeholder items (e.g., 6 items) and render skeleton cards in the same grid layout. Animate them with a pulsing opacity using the Animated API for a polished shimmer effect. Once real data arrives, replace the skeleton array with actual items. This transition from skeleton to real content should be instant — no fade — to avoid visual confusion about whether the content changed.

import { View, StyleSheet } from 'react-native';

function SkeletonCard({ width }) {
  return (
    <View style={[styles.card, { width }]}>
      <View style={styles.imgSkeleton} />
      <View style={styles.info}>
        <View style={styles.titleSkeleton} />
        <View style={styles.priceSkeleton} />
      </View>
    </View>
  );
}

const PLACEHOLDER_COUNT = 6;
export default function SkeletonGrid({ cardWidth }) {
  return (
    <View style={styles.grid}>
      {Array.from({ length: PLACEHOLDER_COUNT }).map((_, i) => (
        <SkeletonCard key={i} width={cardWidth} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 16 },
  card: { borderRadius: 14, overflow: 'hidden', backgroundColor: '#fff', elevation: 2 },
  imgSkeleton: { width: '100%', aspectRatio: 1, backgroundColor: '#e0e0e0' },
  info: { padding: 10, gap: 6 },
  titleSkeleton: { height: 14, backgroundColor: '#e0e0e0', borderRadius: 4, width: '80%' },
  priceSkeleton: { height: 14, backgroundColor: '#e0e0e0', borderRadius: 4, width: '40%' },
});

Pull-to-Refresh in the Grid

Add pull-to-refresh to the grid by passing a RefreshControl to FlatList's refreshControl prop. This renders the native platform refresh indicator (spinner on iOS, pull animation on Android). Set the refreshing prop to a boolean state variable and onRefresh to a function that fetches new data and sets refreshing back to false when done. Always reset refreshing to false in both the success and error paths of your API call to prevent the spinner spinning forever.

import { FlatList, RefreshControl } from 'react-native';
import { useState, useCallback } from 'react';

export default function RefreshableGrid({ initialProducts, fetchProducts }) {
  const [products, setProducts] = useState(initialProducts);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    try {
      const fresh = await fetchProducts();
      setProducts(fresh);
    } finally {
      setRefreshing(false); // always reset
    }
  }, [fetchProducts]);

  return (
    <FlatList
      data={products}
      numColumns={2}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <>{/* ProductCard */}</>}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor='#4f86f7' />
      }
    />
  );
}

Empty State for the Grid

When the product list is empty (no search results or empty category), show an empty state instead of a blank screen. Use FlatList's ListEmptyComponent prop to render a custom component when the data array is empty. A good empty state includes an icon or illustration, a clear headline ('No results found'), and optionally a call-to-action button ('Clear filters' or 'Browse all'). This dramatically improves usability compared to showing nothing and leaving the user confused about whether data is loading or missing.

import { FlatList, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function EmptyState({ onReset }) {
  return (
    <View style={styles.empty}>
      <Text style={styles.icon}>🔍</Text>
      <Text style={styles.title}>No products found</Text>
      <Text style={styles.subtitle}>Try different filters or search terms</Text>
      <TouchableOpacity style={styles.btn} onPress={onReset}>
        <Text style={styles.btnText}>Clear filters</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  empty: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32 },
  icon: { fontSize: 56, marginBottom: 16 },
  title: { fontSize: 20, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 14, color: '#999', textAlign: 'center', marginTop: 8 },
  btn: { marginTop: 20, paddingHorizontal: 24, paddingVertical: 12, backgroundColor: '#4f86f7', borderRadius: 24 },
  btnText: { color: '#fff', fontWeight: '600' },
});

Grid Item Long-Press Actions

Adding a long-press context menu to grid cards enhances their usefulness — users can hold a card to see options like 'Add to Wishlist', 'Share', or 'Remove'. Use the onLongPress prop on the card's TouchableOpacity or Pressable wrapper. Show the action sheet with React Native's built-in ActionSheetIOS on iOS or a custom bottom sheet modal that works cross-platform. Pass the item's data to the long-press handler so the action sheet knows which item to act on.

import { TouchableOpacity, ActionSheetIOS, Platform, Alert } from 'react-native';

function GridCard({ item, width, onDelete, onShare }) {
  function handleLongPress() {
    if (Platform.OS === 'ios') {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ['Cancel', 'Share', 'Remove'],
          cancelButtonIndex: 0,
          destructiveButtonIndex: 2,
        },
        (index) => {
          if (index === 1) onShare(item);
          if (index === 2) onDelete(item.id);
        }
      );
    } else {
      Alert.alert(item.name, 'Choose an action', [
        { text: 'Share', onPress: () => onShare(item) },
        { text: 'Remove', style: 'destructive', onPress: () => onDelete(item.id) },
        { text: 'Cancel', style: 'cancel' },
      ]);
    }
  }

  return (
    <TouchableOpacity
      onPress={() => {/* navigate to detail */}}
      onLongPress={handleLongPress}
      delayLongPress={400}
      style={{ width }}
    >
      {/* card content */}
    </TouchableOpacity>
  );
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

인터랙티브 레슨에서 답해보세요

Lesson Recap

In this lesson you learned: FlatList with numColumns virtualizes grid rendering for large datasets, cardWidth calculation ensures a perfect fit across all screen sizes, and ListEmptyComponent and ListHeaderComponent add polish with empty states and category headers. Next up we explore passing data between components with props.

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“반응형 카드 격자 만들기” 강의는 무료인가요?

네 — “반응형 카드 격자 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“반응형 카드 격자 만들기”에서 뭘 배우나요?

Flexbox 줄바꿈과 백분율 너비를 적용해 작은 휴대폰과 큰 태블릿 모두에서 올바르게 보이는 2열 카드 격자를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“반응형 카드 격자 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Native Academy(으)로 돌아가기