api 호출관련 질문해도 될까요?

여러 탭을 구성하고, 회원 탭을 선택했을때

아래처럼 api 를 통해 데이터를 가져오고자 합니다.

api 를 호출하는 시점에 (call axios) 로그를 찍고

실제 가져온 데이터의 내용을 로그로 찍었는데요

call axios 로그는 한번만 출력됐고, 실제 서버 로그도 한번만 나왔는데

데이터로그의 내용이 총 3번 출력이 됩니다.

1. null

2. api 리턴 데이터

3. 2번과 동일한 api 리턴 데이터

혹시 왜 데이터로그가 3번이나 출력되는지 알 수 있을까요?

let members: IMember[] = []

const urlGetMemberList = 'http://localhost:8080/member/getStudentList'

export const MemberList = ({navigation}) => {
    const [datas, setDatas] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useFocusEffect(React.useCallback(() => {
        const fetchDatas = async () => {
            try {
                setError(null);
                setDatas(null);
                setLoading(true);

                console.log("call axios")
                const response = await axios.get(urlGetMemberList);

                setDatas(response.data);
            } catch (e: any) {
                setError(e);
            }

            setLoading(false);
        };

        fetchDatas();

    }, []))

    console.log(datas)

    if(datas != null) {
        members = []
        console.log(datas.responseBody.length)
        for(let idx = 0; idx < datas.responseBody.length; idx++) {
            members.push(new Member(idx, datas.responseBody.name, datas.responseBody.phone, datas.responseBody.startDate, datas.responseBody.remainCount))
        }
    }

    const renderItem = (item: IMember) => {

        return (
            <TouchableOpacity
                onPress={() => {
                    Alert.alert(item.name)
                    navigation.navigate('borderScreen')
                }}
            >
                <RenderMember member={item} />
            </TouchableOpacity>
        )
    }


    
    return (
        <SafeAreaView>
            <FlatList data={members}
                renderItem={({item}) => renderItem(item)}
                keyExtractor={(item, index) => item.id.toString()}
                ItemSeparatorComponent={() => <View style={[styles.itemSeprator]} />}
            />
        </SafeAreaView>
    )
}

인프런 커뮤니티 질문&답변