7.4.5 검색어 필터링 후 FeedList 재사용하기

자, 검색 기능을 구현해봅시다. 배열의 내장 함수 filter 함수를 통해 구현하면 됩니다. 검색어를 사용해 배열의 데이터를 필터링한 다음, 그 결과물을 FeedList 컴포넌트를 재사용해 화면에 띄워봅시다.

screens/SearchScreen.js

import React, {useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import FeedList from '../components/FeedList';
import LogContext from '../contexts/LogContext';
import SearchContext from '../contexts/SearchContext';

function SearchScreen({navigation}) {
  const {keyword} = useContext(SearchContext);
  const {logs} = useContext(LogContext);

  const filtered =
    keyword === ''
      ? []
      : logs.filter((log) =>
          [log.title, log.body].some((text) => text.includes(keyword)),
        );

  return (
    <View style={styles.block}>
      <FeedList logs={filtered} />
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
  },
});

export default SearchScreen;