7.4.6 EmptySearchResult 만들기

이제 검색 기능은 거의 다 구현했습니다. 검색 결과가 없을 때 안내 문구를 보여주는 컴포넌트를 만들고 이 기능을 마무리합시다.

검색 결과가 없는 상황은 두 가지입니다. 첫 번째는 사용자가 검색어를 입력하지 않았을 때이고, 두 번째는 검색어와 일치하는 결과물이 없을 때입니다. 이 두 상황에 맞는 문구를 준비해 상황에 따라 알맞은 문구를 보여주는 컴포넌트 EmptySearchResult를 만들어봅시다.

components/EmptySearchResult.js

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

const messages = {
  NOT_FOUND: '검색 결과가 없습니다.',
  EMPTY_KEYWORD: '검색어를 입력하세요.',
};

function EmptySearchResult({type}) {
  return (
    <View style={styles.block}>
      <Text style={styles.text}>{messages[type]}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#9e9e9e',
    fontSize: 16,
  },
});

export default EmptySearchResult;

이 컴포넌트는 type이라는 Props를 받아옵니다. 이 값이 NOT_FOUND일 때는 검색 결과가 없다는 문구를 띄우고, EMPTY_KEYWORD일 때는 검색어를 입력하라는 문구를 띄웁니다.