React Native에서 Hooks 및 FlatList를 사용하여 검색 표시줄 추가

React Native를 사용하여 모바일 응용 프로그램을 개발할 때 데이터를 표시하는 일반적인 용례는 목록 형식입니다.
React Native에는 ScrollView과 FlatList의 두 가지 일반적인 목록 작성 방법이 있습니다.프레임워크 API의 각 구성 요소에는 고유한 이점이 있습니다.
이 강좌에서 우리는 데이터를 얻고 데이터를 표시하며 검색 표시줄을 추가하기 위해 FlatList이 제공하는 다양한 도구를 탐색합니다.

선결 조건

이 강좌를 배우려면 자바스크립트/ES6에 익숙하고 로컬 개발 환경에서 다음과 같은 요구를 충족시킬 수 있는지 확인하십시오.

Node.js 버전 >=12.x.x

이(가) 설치되었습니다.
npm 또는 실 같은 패키지 관리자에 접근할 수 있습니다

expo-cli 버전 설치 또는 사용 npx

다음 강좌의 예는 Expo SDK 38을 기반으로 합니다.

입문

엑스포 기반 프로젝트를 새로 만들려면 터미널 창을 열고 다음 명령을 설명된 순서대로 실행하십시오.
프로젝트 디렉터리를 생성한 후 lodash.filter을 설치해야 합니다.잠시 후, 목록 기능에서 검색을 추가할 때, 우리는 이 패키지를 사용하여 데이터를 필터할 것입니다.

npx expo init [Project Name]

# choose a template when prompted
# this example is using the 'blank' template

# after the project directory has been generated

cd [Project Name]

# install dependency
yarn add lodash.filter

새 프로젝트를 만들고 탐색한 후 yarn start을 실행합니다.네가 시뮬레이터를 사용하든지 실제 설비를 사용하든지 간에 너는 다음과 같은 결과를 얻을 수 있다.

평면 목록 어셈블리 작업

React Native의 FlatList은 대량의 데이터를 포함하는 스크롤 목록을 만드는 효과적인 방법이며 전체적인 성능을 떨어뜨리지 않습니다.이것은 화면에 표시된 항목만 보이기 때문에 대형 데이터 진열에 최적화되었다.데이터 목록에서 스크롤할 때 내부 상태는 유지되지 않습니다. - ScrollView에 비해 ScrollView는 구성 요소를 설치한 후 즉시 모든 데이터를 보여줍니다.이것은 ScrollView의 모든 데이터가 장치의 메모리에 설치되어 대량의 데이터가 나타날 때 성능이 떨어질 수 있음을 의미한다.
데이터 그룹을 FlatList에 전달하는 것은 데이터 목록을 표시하는 방식이다.어떻게 작동하는지 봅시다.예를 들어 App.js을 열고 함수 구성 요소 앞에 다음 데이터 그룹을 추가합니다.

const data = [
  { id: '1', title: 'First item' },
  { id: '2', title: 'Second item' },
  { id: '3', title: 'Third item' },
  { id: '4', title: 'Fourth item' }
];

다음은 FlatList 파일에서 App.js을 가져옵니다.

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

FlatList은 데이터 목록을 표시하는 데 필요한 세 가지 주요 도구를 사용합니다.

data: 목록을 만드는 데 사용되는 데이터 그룹입니다.패턴은 여러 개의 요소로 구성된 객체로 구성됩니다.

keyExtractor: FlatList 수조의 각 요소에 대해 유일한 식별자 또는 id을 사용하도록 알려줍니다.

renderItem: 데이터 그룹에서 단일 요소를 가져와 UI에 표시하는 함수입니다.

그런 다음 App 구성 요소를 수정하여 data의 목록을 되돌려줍니다.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Basic FlatList Example</Text>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text style={styles.listItemText}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

다음 styles 객체를 추가합니다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: '#101010',
    marginTop: 60,
    fontWeight: '700'
  },
  listItem: {
    marginTop: 10,
    padding: 20,
    alignItems: 'center',
    backgroundColor: '#fff',
    width: '100%'
  },
  listItemText: {
    fontSize: 18
  }
});

이제 시뮬레이터로 돌아가면 data 진열의 모든 대상이 목록으로 표시됩니다.FlatList을 사용하여 조직적인 데이터를 표시하려면 최소한의 노력이 필요하다.

평면 목록의 API에서 데이터 가져오기

FlatList는 모바일 애플리케이션에서 데이터를 가져오는 방법에 대해 전혀 관심을 갖지 않습니다.이전 절에서, 우리는 어떻게 데이터 그룹을 모의하여 목록으로 사용하는지 확실히 이해했다.이 섹션에서는 원격 API 리소스에서 데이터를 가져와 이전 섹션에서 설명한 것과 같은 패턴으로 데이터를 표시합니다.
참고: 원격 API 리소스의 경우 Random User Placeholder API을 사용합니다.
우선 이 절에서 사용할 모든 필수 구성 요소를 가져옵니다.다음과 같이 다음 가져오기 문을 업데이트합니다.

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Image
} from 'react-native';

그런 다음 API 끝점의 URL을 정의하여 데이터를 상수로 추출합니다.

const API_ENDPOINT = `https://randomuser.me/api/?seed=1&page=1&results=20``;

API 끝점에 대한 HTTP 요청이 상위 20개 결과를 가져옵니다.
React 갈고리 App을 사용하여 useState 구성 요소에 세 개의 상태 변수를 정의합니다.기본적으로 isLoading 상태 변수의 부울 값은 false입니다.그 목적은 API 끝에서 데이터를 추출할 때 로드 표시기를 표시하는 것입니다.
기본적으로 data 변수에는 빈 그룹이 있습니다.상태 변수를 사용하여 데이터 목록을 표시하려면 FlatList을 채웁니다.
마지막 상태 변수 error의 기본값은 null입니다.데이터를 가져오는 중 오류가 발생해야 업데이트됩니다.

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  // ...
}

다음은 자바스크립트에서 온 React 갈고리 useEffect 및 fetch API를 사용하여 API_ENDPOINT에서 데이터를 가져옵니다.App 구성 요소에 상태 변수를 정의한 후 다음 내용을 추가합니다.loading이 실례화되면 true 변수는 useEffect으로 설정됩니다.이 변수의 부울 값은 데이터 추출이 완료되거나 오류가 발생했을 때만 false으로 설정됩니다.다음 setData은 데이터 그룹을 사용하여 data 변수를 업데이트하고 있습니다.

export default function App() {
  // state variables defined

  useEffect(() => {
    setIsLoading(true);

    fetch(API_ENDPOINT)
      .then(response => response.json())
      .then(results => {
        setData(results);
        setIsLoading(false);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err);
      });
  }, []);
  // ...
}

그리고 두 개의 if 조건을 추가하고 각 조건은 두 개의 다른 장면에 대해 JSX를 되돌려줍니다.우선 데이터를 추출할 때 로드 표시기가 표시됩니다.둘째, 오류가 발생하면 오류 메시지가 표시됩니다.

export default function App() {
  // state variables defined

  // fetch data using useEffect

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#5500dc" />
      </View>
    );
  }

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 18}}>
          Error fetching data... Check your network connection!
        </Text>
      </View>
    );
  }
  // ...
}

그리고 FlatList을 업데이트하여 사용자 화신과 API 끝에서 가져온 사용자 이름을 표시합니다.

export default function App() {
  // ...

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Favorite Contacts</Text>
      <FlatList
        data={data}
        keyExtractor={item => item.first}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Image
              source={{ uri: item.picture.thumbnail }}
              style={styles.coverImage}
            />
            <View style={styles.metaInfo}>
              <Text style={styles.title}>{`${item.name.first} ${
                item.name.last
              }`}</Text>
            </View>
          </View>
        )}
      />
    </View>
  );
}

styles 객체를 업데이트하는 것을 잊지 마십시오.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: '#101010',
    marginTop: 60,
    fontWeight: '700'
  },
  listItem: {
    marginTop: 10,
    paddingVertical: 20,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
    flexDirection: 'row'
  },
  coverImage: {
    width: 100,
    height: 100,
    borderRadius: 8
  },
  metaInfo: {
    marginLeft: 10
  },
  title: {
    fontSize: 18,
    width: 200,
    padding: 10
  }
});

다음은 FlatList을 사용하여 표시된 연락처 목록입니다. 이 절차를 거친 후에 연락처를 얻을 것입니다.

이것은 데이터를 추출할 때의 로드 표시기입니다.

다음은 응용 프로그램이 데이터를 얻을 수 없는 장면입니다.

검색 표시줄 추가

이 절에서 현재 FlatList의 맨 위에 검색 표시줄을 만듭니다.검색창을 표시하기 위해 ListHeaderComponent이라는 도구를 제공합니다.App 구성 요소를 편집하기 전에 이 단계에서 필요한 가져오기 문장을 추가합니다.react-native에서 TextInput의 가져오기를 추가합니다.이 밖에 수입 lodash.filter.

import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Image,
  TextInput
} from 'react-native';
import filter from 'lodash.filter';

다음과 같이 FlatList에 아이템을 추가합니다.

<FlatList
  ListHeaderComponent={renderHeader}
  // ... rest of the props remain same
/>

그런 다음 다음 다음 JSX로 반환되는 renderHeader 함수를 정의합니다.

export default function App() {
  //...
  function renderHeader() {
    return (
      <View
        style={{
          backgroundColor: '#fff',
          padding: 10,
          marginVertical: 10,
          borderRadius: 20
        }}
      >
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          clearButtonMode="always"
          value={query}
          onChangeText={queryText => handleSearch(queryText)}
          placeholder="Search"
          style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
        />
      </View>
    );
  }
// … render JSX below
}

이것은 이 단계 후 시뮬레이터의 출력입니다.

다음은 두 개의 상태 변수를 추가합니다.우선, query은 사용자가 제공한 입력을 추적하여 데이터 목록을 검색합니다.기본값은 빈 문자열입니다.그 다음 다른 변수를 추가하여 데이터를 필터링하는 데 사용할 API의 데이터를 저장합니다.

const [query, setQuery] = useState('');
const [fullData, setFullData] = useState([]);

useEffect 어레이를 채우려면 부작용 fullData을 업데이트합니다.

useEffect(() => {
  setIsLoading(true);

  fetch(API_ENDPOINT)
    .then(response => response.json())
    .then(response => {
      setData(response.results);

      // ADD THIS
      setFullData(response.results);

      setIsLoading(false);
    })
    .catch(err => {
      setIsLoading(false);
      setError(err);
    });
}, []);

그리고 handleSearch이라는 프로세서 방법을 추가하면 검색 표시줄을 처리합니다.기본적으로 검색어로 제공된 검색어를 소문자로 포맷합니다.상태 변수 fullData에서 사용자 이름을 필터링하고 상태 변수 data은 검색 후의 최종 결과를 저장하여 정확한 사용자를 나타냅니다.contains 처리 프로그램 방법은 조회를 찾을 것입니다.그것은 사용자의 이름과 성, 그리고 handleSearch()에서 소문자로 포맷된 두 개의 인자를 받아들인다.

const handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const filteredData = filter(fullData, user => {
    return contains(user, formattedQuery);
  });
  setData(filteredData);
  setQuery(text);
};

const contains = ({ name, email }, query) => {
  const { first, last } = name;

  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }

  return false;
};

현재, 시뮬레이터에서, 검색 검색은 이 검색을 바탕으로 결과를 얻을 수 있다.

결론

이 강좌의 중점은 FlatList 구성 요소가 제공하는 다양한 도구를 익히는 것입니다.
API 끝에서 데이터를 가져올 때 Algolia과 같은 강력한 검색 공급자를 사용하여 더 좋은 결과를 얻을 것을 권장합니다.
마지막으로 민감한 논리를 포함하는 비즈니스 네이티브 응용 프로그램을 개발하고 있다면 각별한 주의를 기울이는 것을 잊지 마십시오.코드 도난, 변조, 역방향 프로젝트의 영향을 받지 않도록 다음과 같은 방식으로 보호할 수 있습니다.