단일 항목 선택 리스트

export const getBrands = () => (dispatch) => {
    const brandsSet = new Set();
    const bikesRef = dbRef(db, 'bikes');
    dbGet(bikesRef).then((snapshot) => {
        console.log('bikes list length: ', snapshot.size)
        snapshot.forEach((child) => {
            if (child.exists()) {
                brandsSet.add(child.val().brand)
            }
            else {
                console.log("null data")
            }
        })
        const brands = [...brandsSet];
        console.log("brands loaded", brands)
        dispatch({type: GET_BRANDS, payload: brands})
    }, (error) => {
        console.log(error)
    })
}

이전에 바이크 브랜드를 가져오는 액션을 만들었었는데, 이 부분은 아예 서버쪽에서 처리됐으면 좋겠다는 생각이 든다. 즉, 파이어베이스에 바이크 데이터를 입력하면, 서버 내에서 brand 필드를 수신하고 있다가 만약 이미 존재하는 brand가 아닐 때 새로 rtdb의 brand 리스트에 추가해주는 동작이 있으면 좋겠다. 추후 이런 동작을 파이어베이스에 구현 가능한지 검토해봐야겠다.

 

 위 화면을 구현하려고 한다. 즉, 검색 기능이 있어야한다. 이전 화면에서 어떤 브랜드를 선택했는지 props로 받아오고, 그걸 인자로 넘겨서 쿼리를 날리는 액션을 불러온다. 쿼리는 다음을 참고했다.

Firebase(파이어베이스) 데이터베이스 쿼리 : 네이버 블로그 (naver.com)

Firebase(파이어베이스) 데이터베이스 쿼리

 추가로, 파이어베이스 규칙 수정을 통해 쿼리 성능 향상을 가져올 수 있었다. 다음 링크를 참고하자.

javascript - Firebase warning: Using an unspecified index - Stack Overflow

Firebase warning: Using an unspecified index

 

 데이터를 가져오는건 끝났으니 이제 검색 결과를 띄워줄 차례다. includes를 이용해 입력 값이 포함된 바이크 모델이 있는지 확인하면 된다.

    renderBikes = ({item}) => {
        if(item && item.modelName.includes(this.state.input.value)) {
            const backgroundColor = item.modelName === this.state.selectedBike.modelName ? "gray" : "white";
            return (
                <TouchableHighlight
                    onPress={() => {this.setState({selectedBike: {modelName: item.modelName}})}}
                    style={{padding:10, marginVertical: 3, backgroundColor: backgroundColor}}
                >
                    <Text>{item.modelName}</Text>
                </TouchableHighlight>
            )
        } else {
            return null
        }
    }

 다음 링크를 참고하자.

[JavaScript]문자열에서 특정 문자열 포함 여부 확인 (tistory.com)

[JavaScript]문자열에서 특정 문자열 포함 여부 확인