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

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.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 1. getRecFollowingList.js 파일의 파일명과 내부의 함수명을 변경할 것을 
//    추천드립니다. 
//    getRecFollowingList.js -> getFollowingList.js
//    getRecFollowingList -> getFollowingList
//
//    ** 이유: 단순히 following list를 불러오는 것인데, rec를 붙여서 
//    전체적인 추천 following을 불러오는 부분과 혼돈이 발생할 여지가 있고 
//    코드의 이해가 어려워집니다.

const [allDerivedRecFollowingList, setAllDerivedRecFollowingList] = useState([])
// 2. 훅으로 상태 관리는 렌더링에 꼭 필요한 경우에 최소한만 사용할 것을
//     추천드립니다. 나중에 단순 myFollowList도 렌더링에 포함된다면
//     두 개다 하셔야 되는 건 맞습니다.

useEffect(() => {
  async function getAllDerivedRecFollowingList() {
    const duplicatedFollowSet= new Set();
    const seen = new Set();
    
    const myFollowingList = await getFollowingList(myAccountName);
    
    // 3. myFollowList를 여기서 바로 활용해 두 번째 useEffect에 있던 부분의 
    //     코드를 작성합니다. 여기서는 크게 상관없는 것 같기도 하나 김하림님이 
    //     언급해 주신 것처럼 뭔가를 순차적으로 페치해 와야할 때는 forEach를
    //     사용하지 않는 것이 좋습니다. 일반적인 for 블락으로 처리 하시거나 
    //     Promise.All()을 사용하시는 것이 좋습니다. forEach의 경우 에러없이 
    //     작동하기 때문에 순서 꼬이면 나중에 오류를 찾기가 더 어렵고
    //    시간이 걸리게 됩니다.

      for (const myFollowingItem of myFollowingList) {
        let derivedFollowingList = await getFollowingList(myFollowingItem.accountName);
       
    ...
     }
    
    setAllDerivedRecFollowingList([...duplicatedFollowSet])
  }
  
  getAllDerivedRecFollowingList()
}, [])
...
// 4. allDerivedRecFollowingList 를 렌더링합니다. 
//     (처음에 질문하실 때 작성하신 부분과 동일하게 렌더링 처리)
//
// 5. .then()을 사용하는 하는 건 생각해 보니 할 수는 있는데 비동기로 
//      처리해야하는 반복문이 있어 좀 복잡해지는 것 같습니다.
//
// 6. useEffect 부분이 길어지니 가독성을 위해 별도의 라이브러리 파일로 
//      빼고 import하는 것도 괜찮은 것 같습니다.
//
// ** 더 참고할 자료: [JS] 반복문 안에서의 비동기 함수 사용
//                               (https://sjh9708.tistory.com/25)