[리액트] 코드를 저장하고 웹을 보면 제가 원하는 결과가 안 뜨다가 , 코드를 다시 수정하고 저장하면 그제서야 원하는 결과가 나와요 ㅠㅠ

Question

제목이 좀 어수선한 것 같은데 .. 다시 한 번 설명을 드리자면, 게시글 리스트를 만드는 중입니다. 제가 팔로우한 사람들의 게시글을 불러오기 위해 following API를 사용하여 사람들의 리스트를 불러오고, 그 리스트를 게시글을 불러온느 API를 사용하여 map을 돌렸어요.
그리고 코드를 저장한 후에 웹을 실행 시켜보면 등록된 상품이 없습니다. 라고 뜹니다. 하지만 다시 코드를 수정하고 저장하면 (수정의 예는 그냥 세미콜론을 없앤다거나, 주석을 없앤다거나 코드에 영향이 없는 수정입니다!) 제가 원하는 게시글 리스트가 웹에 결과로 나타납니다 ㅠㅠ 도대체 이게 무슨 일일까요..? 렌더링의 문제인가요?

사진에서 const page 부분이 return부분입니다

김현진 · Accepted Answer

togetherList 함수가 빈 디펜던시 배열인 useEffect에서 실행되고 있네요. 해당 함수가 마운트될 때에만 실행이 될텐데 이때 following 변수가 다른 useEffect 통해서 setFollowing 되기 전에 호출이 되어서 결과가 없을 가능성이 있어보입니다.
디펜던시 배열에 following을 추가하면 해결될 듯 합니다.

그런데 useEffect의 디펜던시 배열에 object가 들어갈 경우 렌더링이 될 때마다 useEffect가 계속 호출 될 수 있어 다른 값을 사용하는 것이 좋습니다. await을 통해 following과 togetherLists를 한 useEffect에서 순차적으로 호출을 하거나 isFollowingLoaded 등의 변수를 디펜던시에 넣는건 어떨까요?

로그를 찍어가며 각 값들이 제대로 들어간 것은 맞는지 확인해보면 문제를 찾는데 도움이 될 겁니다.