[React-Native] 통합 검색 기능

원래는 품명으로만 검색할 수 있도록 구현해놓았는데

이번에는 부품번호, 품명, 해쉬태그 등 모두 검색이 가능할 수 있도록 통합검색 기능을 구현해보았어요.

---

✅ 검색을 위한 함수 구현

//부품 검색
search = (value) => {
    this.setState({ goodsContent: this.dataFiltering(value) })
};

//필터링 (부품번호, 부품명 동시 검색)
dataFiltering = (value) => {
    let goodsContent = this.Contents;
    goodsContent = goodsContent.filter((content) => {
        if(value==='')
            return true;
        else {
            if(content.number===value)
                return true;
            if(content.name.includes(value))
                return true;
            if(content.hashTag.includes(value))
                return true;
        }
    });
    return goodsContent;
}

dataFiltering 함수에서 TextInput으로 입력받은 값을 전체 리스트( goodsContent) 에서 filter 함수를 통해 걸러줍니다.

value 값이 ' ' (null) 일 경우 전체값을 반환하고, 부품번호는 완벽히 일치할 경우, 이름과 해쉬태그는 특정 요소가 포함되어 있을경우 그 값들이 들어있는 리스트들을 반환해줍니다.

 

📍 Includes 함수란 ?

- 배열이 특정요소를 포함하고 있는지 판별해주는 함수

 

✅ TextInput onChange를 통해 입력된 값을 Filtering

<TextInput
    onChange={(value) => this.search(value.nativeEvent.text)}
    placeholder="품명을 입력해주세요"
    placeholderTextColor="light grey"
    style={styles.input}
    value={this.state.number}
/>

TextInput의 속성인 onChange에서 search 함수를 호출해 입력된 값을 value로 전달해줍니다.