이때까지 계속 더미 데이터만 가지고 했는데 이제부터는 파이어베이스를 이용해서 받아온 데이터를 가지고 렌더링을 해볼 것이다.

하나하나 데이터를 일일히 저장해서 담아놓는다. 그리고 이것을 fetch를 통해 가져온다.

실행하자마자 데이터가 렌더링이되는 모습이 보여야하기 때문에 useEffet에서 fetch를 해줄 것이다. 그리고 async await을 써서 비동기 코드를 동기 처럼 동작하는 것처럼 만들어준다.

근데 그냥 useEffect에다가 async 를 쓰면 될거같은데 왜 굳이 한번 더 감싸서 한걸까?

<aside> 💡 useEffect 함수의 역할

useEffect는 컴포넌트의 렌더링과 관련된 작업을 수행하는데, 이 작업은 주로 동기적으로 처리되어야 한다. 즉, 빠르게 실행되고 화면을 업데이트 하는데 사용된다. 그런데 async 함수는 비동기 작업을 처리하는데 사용되므로, 직접 useEffect 내에서 사용하면 동기적인 작업을 방해할 수 있다.

</aside>

담아온 데이터를 이용해서 json()으로 데이터를 이용가능한 객체로 변환해준다음에 받아온 데이터의 키 값으로 반복문을 돌며 loadedMeals 배열에 담아 setMeals에 저장한다.