TIL # 54 < React Native 11 - ScrollView RefreshControl >

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

React Native 팀프로젝트중!!

 

  업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용

 

⚽ Trouble Shooting

원인

• 로그인 사용자만 게시글 ‘삭제하기’ 버튼을 보이도록 하는 로직
• 그러나 비로그인 사용자가 ‘삭제하기’ 버튼이 있는 화면으로 진입하면, 렌더링 오류가 발생했습니다.
• 그 이유는 authService.currentUser가 undefined이기 때문이었습니다

  * Post.js

  <CustomButtonBox>
        {post.userId === authService.currentUser.uid ? (
          <CustomButton onPress={onDelete}>
            <BtnTitle>글 삭제하기</BtnTitle>
          </CustomButton>
	  		) : (
		  	   ""
        )}

 

해결

옵셔널 체이닝을 사용하여 해결

  * Post.js

  <CustomButtonBox>
        {post.userId === authService.currentUser?.uid ? (
          <CustomButton onPress={onDelete}>
            <BtnTitle>글 삭제하기</BtnTitle>
          </CustomButton>
	  		) : (
		  	   ""
        )}

 

 

  오늘 새로 배운 내용

 

📖ScrollView RefreshControl

import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}