비동기 함수와 hook으로 배열을 읽어오는 법

현재 비동기 함수로 firebase에서 객체를 받아오는 것 까지는 성공하였습니다.
이후 useEffect를 통해 렌더링 시 다른 state들은 정상적으로 저장이 되고 출력 되는 것을 확인하였는데,
객체를 원소로 가지는 배열이 저장이 잘 되지 않아 질문을 드립니다.

const Club = ({ route }) => {
const [title, setTitle] = useState(’’);
const [leader, setLeader] = useState({
name: “”,
photoUrl: “”,
});
const [members, setMembers] = useState([]);
const [region, setRegion] = useState(’’);
const [maxNumber, setMaxNumber] = useState(0);
const [id, setId] = useState(0);
const [isMember, setIsMember] = useState(false);

const user = getCurrentUser();

const getIsMember = (user) => {
const index = members.findIndex( obj => obj.uid == user.uid );
if(index != -1) {setIsMember(true)}
console.log(isMember);
}

const getClub = async () => {
try {
const clubData = await getClubInfo(route.params?.id);
setTitle(clubData.title);
setLeader({
name: clubData.leader.name,
photoUrl: clubData.leader.photoUrl
});
console.log(“clubData”);
console.log(clubData.members);
setMembers([…members, …clubData.members]);
console.log(“members”);
console.log([…members, …clubData.members]);
console.log(members);
setRegion(clubData.region);
setMaxNumber(clubData.maxNumber);
//getIsMember(user);
} catch (e) {
Alert.alert(‘클럽 데이터 수신 오류’, e.message);
}
}

useEffect(() => {
getClub();

}, []);

const Item = ({ uid, isWaiting }) => {
console.log(members);
console.log(“uid”);
console.log(uid);
return (
uid: {uid} / isWaiting: {isWaiting}
);
};

return (

<Text style={{ fontSize: 24 }}>ID: {route.params?.id}
<Text style={{ fontSize: 24 }}>Title: {route.params?.title}
<Text style={{ fontSize: 12 }}>{title}
<Text style={{ fontSize: 12 }}>{leader.name}
<Text style={{ fontSize: 12 }}>{region}
<Text style={{ fontSize: 12 }}>{maxNumber}
<FlatList
data={members}
renderItem={item => }
keyExtractor={item => item[‘uid’].toString()}
/>

);
};

export default Club;

route에서 현재 객체의 데이터베이스상 id를 넘겨받아 외부의 firebase에서 데이터를 받아오는
과정까지는 정상적으로 작동을 하는 것을 확인하였습니다. clubData는 객체로 이루어져 있습니다. 아래의 Text 부분의 여러 다른 State들은 정상적으로 출력이 되는데요, getClub 부분의 clubData에서 clubData.members는 콘솔로 정상적으로 출력이 되지만, setMembers이후 members state는 저장이 되지 않아 출력이 되지 않는 것을 확인할 수 있었습니다. 이 부분이 동기-비동기 함수의 문제 인건지, 혹은 hook 사용에 있어 문제가 되는 것인지 묻고 싶습니다. flatlist는 빈 화면으로 출력이 되는 것을 확인했고, Item 렌더링 시 모두 출력이 undefined로 출력이 되는 것을 확인했습니다.

코드에는 문제가 없어보여요
스타일 문제로 인해서 FlatList 가 안보이는 경우가 아닌지 확인해보셔야 할 것 같습니다.
아니면 이렇게 출력이 되나 테스트 해보세요
<Text>{JSON.stringify(members)}</Text>

console 명령어로 member 출력시 빈 리스트로 나오는데 이 부분은 문제가 없는 걸까요?

어느 시점, 어느 부분에서 콘솔을 찍으신지 알아야 답을 드릴 수 있을거같아요

object를 받아오는 비동기 함수에서, setState로 member를 할당 후 console.log로 출력하였습니다

state 업데이트는 비동기로 이루어지기 때문에, setState 를 요청하신 직후
로그를 찍으시면, 업데이트 전 값으로 나옵니다.
업데이트된 값을 정확하게 보시려면, 아래와 같이 해보세요

useEffect(()=> {
  console.log(members);
},[members])

아하 비동기로 이루어져서 업데이트가 안되는 것 처럼 보이는거군요 친절한 답변 감사드립니다!!