9.5.5 그리드 뷰 만들기

불러온 포스트를 그리드 뷰 형태로 화면에 보여줍시다. FlatList에서 numColumns Props를 설정하면 데이터가 세로 방향으로 일렬로 나타나지 않고, 격자 모양으로 나타납니다.

우선 FlatList의 renderItem에서 사용할 PostGridItem이라는 컴포넌트를 만들어줍시다.

components/PostGridItem.js

import React from 'react';
import {StyleSheet, useWindowDimensions, Image, Pressable} from 'react-native';

function PostGridItem({post}) {
  const dimensions = useWindowDimensions();
  const size = dimensions.width / 3;

  const onPress = () => {
    // TODO: 단일 포스트 조회 화면 띄우기
  };

  return (
    <Pressable
      onPress={onPress}
      style={({pressed}) => [
        {
          opacity: pressed ? 0.6 : 1,
          width: size,
          height: size,
        },
        styles.block,
      ]}>
      <Image
        style={styles.image}
        source={{uri: post.photoURL}}
        resizeMethod="resize"
        resizeMode="cover"
      />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  block: {},
  image: {
    backgroundColor: '#bdbdbd',
    width: '100%',
    height: '100%',
  },
});

export default PostGridItem;