[React Native] 데이터가 들어오기전 loading 돌리기

문제사항

옵셔널체이닝 Optional Chaining (?.)

❖ 개발: react native 앱개발

❖ 상태: 앞서 작성한 게시물은 버튼을 터치하고, 다음페이지로 이동이 되면서 발생하는 에러를 해결함.

     (에러이유: 데이터가 들어오는시간보다 페이지이동이 빨라서, 페이지이동을 했지만 화면에 뿌릴데이터가 없어서 에러가 발생)

     위의 블로그내용을 해결하고나니,

     현재는 데이터가 들어오는동안 빈화면이 유지되는데, 데이터가 들어올때는 로딩중임을 알리는 로딩바를 보여주고싶다.

---

해결방법 → if조건식 or (조건)삼항연산자

❖ if조건식 코드 :

     아래와같이 if문을 활용하여, 데이터가 없으면 <Loading>컴포넌트가 실행되어 로딩바가 돌아가다,

     데이터가 들어오면 rendering 되어 리스트가 보이게함.

const component = ({ originalData }) => {
  const styles = StyleSheet.create({
    cardContainer: {
      borderRadius: 0,
    },
  });
  const renderItems = ({ item }) => (
    <Card>
      <TouchableOpacity>
        <Layout style={{ ...styles.cardContainer }}>
          <Text>{item}</Text>
        </Layout>
      </TouchableOpacity>
    </Card>
  );
 
  //if문을 활용 ----------------
  if (!originalData) {
    return <Loading />;
  }
  // -------------------------
  
  return (
    <>
      <Layout>
        <FlatList
          data={originalData}
          renderItem={renderItems}
          keyExtractor={(item, index) => index.toString()}
        />
      </Layout>
    </>
  );
};

---

❖ (삼항)조건연산자 코드:

     위와 해결된 상태는 동일하지만, if문대신에 삼항조건연산자를 활용함.

    originalData 데이터가 들어오면 <Layout>이 실행되고,

     데이터가 들어오는중이면 <Loading /> 컴포넌트가 실행되어 로딩바가 돌아간다.

const component = ({ originalData }) => {
 (.....)
  return (
    <>
// 조건삼항연산자 활용(조건?참:거짓)----------
      {originalData ? (
        <Layout>
          <FlatList />
        </Layout>
      ) : (
        <Loading />
      )}
// -----------------------------------
    </>
  );
};

---

문제해결 전/후

❖ 문제해결전: 데이터가 들어오기전에는 화면이 비어있음.

---

❖ 문제해결후: 데이터가 들어올때까지 빈화면 대신에 로딩바가 돌아감

 

---

   개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D