0. 목적

Hooks를 사용하여 서버 및 DB에서 데이터 검색

1. 환경

React : 16.8.6

React Native : 0.63.4

2. 소스 코드

GetData.js

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

import {useEffect, useState} from 'react';

function App() {
  const [response, setResponse] = useState([]);

  useEffect(() => {
    // データ取得(DBの場合もここでread処理を行う)
    fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060') // [1]
      .then((response) => response.json())
      .then((responseJson) => {
        setResponse(responseJson['results']);
      });
  }, []);

  if (!response.length) { // データ取得前
    return <Text>Loading...</Text>;
  } else if (response.length) { // データ取得後
    return (
        <FlatList
          data={response}
          renderItem={({item}) => (
            <View>
              <Text>〒{item.zipcode}</Text>
              <Text>
                {item.address1}
                {item.address2}
                {item.address3}
              </Text>
            </View>
          )}
          keyExtractor={(item) => item.zipcode}
        />
    );
  }
}

export default App;

3. 결과

Loading이 표시되면 위의 이미지처럼 그려집니다.

4. 해설

처리 흐름
1. 'Loading' 표시
2. 「useEffect」내의 처리를 실행
3. 「주소」를 표시

useEffect는 렌더링 후 실행되므로 response의 유무에 따라 그리기 내용을 변경합니다.
또한 setResponse는 response의 값이 변경 될 때 다시 렌더링되므로 데이터 검색 후 if 문을 다시 실행하여 데이터 내용을 표시합니다.

5. 참고

[1] 우편번호 검색 API