리액트 비동기 문제일까요 ㅠㅠ?

30번 째 줄 myFollowList.forEach 콜백 함수에 async/await를 쓰신 게 문제의 원인으로 추정됩니다. forEach는 프로미스 응답을 기다리지 않기 때문에, 예상한 결과와 다른 값이 나올 수 있습니다. 로직을 for..of로 변경해서 작성해보세요. 예시 코드처럼요. 참고: MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach > forEach() expects a synchronous function — it does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as forEach callbacks.

1for (const item of myFollowList) {
2  let list = await getRecFollowingList(item.accountname);
3  // blah blah..
4}

myFollowList값을 useState로 넣는 방법 말고, useEffect를 하나만 만들고 그 안에 나눠져 있는 코드들을 둘 다 넣어서 `async`로 myFollowList 페치해온 값을 넘기거나, `.then(followers => ...` 로 값을 넘겨서 처리하면 되지않을까요? 그리고 제 생각에는 첫 번째, 두 번째 모두 자신의 팔로우를 불러오는 것이 아니라 첫 번째가 콘솔에 두 번 찍히는 것 같습니다. - 첫 번째 useEffect conslole.log(">> my follow list:", list); - 두 번째 useEffect console.log(">> recommended follow list:", list); 이렇게 앞에 명확하게 표시하면 확인하는데 더 도움이 되시지 않을까 싶습니다.

제가 전체적인 코드 배경을 잘 몰라서, 잘못 이해하고 있을 수도 있습니다. 그리 복잡하지 않은 단순한 내용인데 설명이 장황해진 것 같아 죄송합니다. ** 간단 하게 말씀드리면 3번 설명 자리에 그냥 두번째 useEffect 에 있던 코드를 연결해서 작업하는 것입니다.

1// 1. getRecFollowingList.js 파일의 파일명과 내부의 함수명을 변경할 것을 
2//    추천드립니다. 
3//    getRecFollowingList.js -> getFollowingList.js
4//    getRecFollowingList -> getFollowingList
5//
6//    ** 이유: 단순히 following list를 불러오는 것인데, rec를 붙여서 
7//    전체적인 추천 following을 불러오는 부분과 혼돈이 발생할 여지가 있고 
8//    코드의 이해가 어려워집니다.
9
10const [allDerivedRecFollowingList, setAllDerivedRecFollowingList] = useState([])
11// 2. 훅으로 상태 관리는 렌더링에 꼭 필요한 경우에 최소한만 사용할 것을
12//     추천드립니다. 나중에 단순 myFollowList도 렌더링에 포함된다면
13//     두 개다 하셔야 되는 건 맞습니다.
14
15useEffect(() => {
16  async function getAllDerivedRecFollowingList() {
17    const duplicatedFollowSet= new Set();
18    const seen = new Set();
19    
20    const myFollowingList = await getFollowingList(myAccountName);
21    
22    // 3. myFollowList를 여기서 바로 활용해 두 번째 useEffect에 있던 부분의 
23    //     코드를 작성합니다. 여기서는 크게 상관없는 것 같기도 하나 김하림님이 
24    //     언급해 주신 것처럼 뭔가를 순차적으로 페치해 와야할 때는 forEach를
25    //     사용하지 않는 것이 좋습니다. 일반적인 for 블락으로 처리 하시거나 
26    //     Promise.All()을 사용하시는 것이 좋습니다. forEach의 경우 에러없이 
27    //     작동하기 때문에 순서 꼬이면 나중에 오류를 찾기가 더 어렵고
28    //    시간이 걸리게 됩니다.
29
30      for (const myFollowingItem of myFollowingList) {
31        let derivedFollowingList = await getFollowingList(myFollowingItem.accountName);
32       
33    ...
34     }
35    
36    setAllDerivedRecFollowingList([...duplicatedFollowSet])
37  }
38  
39  getAllDerivedRecFollowingList()
40}, [])
41...
42// 4. allDerivedRecFollowingList 를 렌더링합니다. 
43//     (처음에 질문하실 때 작성하신 부분과 동일하게 렌더링 처리)
44//
45// 5. .then()을 사용하는 하는 건 생각해 보니 할 수는 있는데 비동기로 
46//      처리해야하는 반복문이 있어 좀 복잡해지는 것 같습니다.
47//
48// 6. useEffect 부분이 길어지니 가독성을 위해 별도의 라이브러리 파일로 
49//      빼고 import하는 것도 괜찮은 것 같습니다.
50//
51// ** 더 참고할 자료: [JS] 반복문 안에서의 비동기 함수 사용
52//                               (https://sjh9708.tistory.com/25)