[FN] 게시판 개발 일지[2] / 게시판, 게시글 내용 확인

지난 게시글에서는 리액트 네이티브와 firebase를 연동해서 작성하는 게시글을 firebase database에 저장되도록 하였고, 게시글 작성 페이지에서 날짜 선택 컴포넌트를 소개했다.

▼ ▼ ▼ 자세한 내용은 ▼ ▼ ▼

[FN] 게시판 개발 일지[1] / FireBase, TouchableWithoutFeedback, DateTimePicker

 

1. 모든 게시글 출력 페이지

게시글 작성 페이지가 개발되었다면 이제는 게시글들을 출력하는 페이지가 필요하다.

• unsubscribe에 firestore에 게시글 정보가 저장되는 meetings 컬렉션을 참조한다.
• 게시글은 언제나 작성자가 수정, 삭제하고 새로운 글이 추가될 수 있으므로, onSnapshot을 사용하면 Firestore에서 데이터가 변경될 때 자동으로 클라이언트에서 변경된 데이터를 반영한다.
• 각 문서의 문서id와 문서 데이터들을 newPosts에 저장한다
• 문서 데이터를 setPosts에 저장
• 컴포넌트가 언마운트되면 unsubscribe(구독 해제) = 메모리 누수나 불필요한 리소스 사용을 방지

const [posts, setPosts] = useState<any[]>([]);

useEffect(() => {
  const unsubscribe = firestore()
    .collection('meetings')
    .onSnapshot(
      snapshot => {
        if (!snapshot.empty) {
          const newPosts = snapshot.docs.map(doc => ({
            id: doc.id,
            ...doc.data(),
          }));
          setPosts(newPosts);
        }
        
        return () => unsubscribe();

 

 

ScrollView는 보이지 않는 항목도 모두 메모리에 로드하여 데이터의 양이 많아지면 성능적인 문제가 발생하므로 FlatList를 사용했다. 표시해야 하는 양이 많을 경우 FlatList를 사용하면 화면에 보이는 항목들만 동적으로 렌더링하는 장점이 있어 FlatList를 사용했다.

• data = Firebase에서 가져온 게시글 데이터를 FlatList에 전달한다.
• keyExtractor = 각 게시글마다 id를 사용한다.
• renderItem = 게시글을 눌렀을때 게시글 출력 스크린으로 이동하고 게시글 id를 전달한다.
• 나타나는 항목에는 작성자가 등록한 이미지, 게시글 제목, 게시글에 작성한 공연 이름, 공연 날짜를 나타냈다.

<FlatList
  data={posts} 
  keyExtractor={(item) => item.id} 
  renderItem={({ item }) => (
    <TouchableOpacity 
      style={styles.card} 
      onPress={() => navigation.navigate('MeetingContent', { postId: item.id })}
    >
      <Image 
        source={{ uri: item.imageUrl || 'https://via.placeholder.com/150' }} 
        style={styles.cardImage}
      />
      <View style={styles.cardContent}>
        <Text style={styles.cardTitle}>{item.title}</Text>
        <Text style={styles.cardDescription}>{item.performanceName || '공연 이름 없음'}</Text>
        <Text style={styles.cardDate}>공연 날짜 : {formatDate(item.performanceDate) || '날짜 정보 없음'}</Text>
      </View>
    </TouchableOpacity>
  )}
  contentContainerStyle={styles.listContainer}
/>

 

구현된 게시글 출력 페이지

 

2. 게시글 내용 페이지

모든 게시글이 출력되는 페이지에서 게시글을 눌렀을 때 작성된 내용을 확인할 수 있도록 게시글 확인하는 페이지도 만들었다.

 

정리되는 대로 수정해서 올리도록 하겠다....