[TIL] 23.04.29~30

오늘의 나는 무엇을 배웠을까?

오늘은 이번 주차 Weekly Mission을 팀원들과 함께 구현해 보는 시간을 가졌다.
다양한 어려움이 있었지만 팀원들과 머리를 맞대고 코드를 짜다 보니 해결이 되었던 것 같다.
Weekly Mission 일부를 구현하며 겪었던 어려움과 해결한 방법을 오늘 내일에 걸쳐 정리해 보려고 한다.

첫 렌더링 시 데이터 fetch가 되지 않아 일어난 문제

카드 컴포넌트를 만들 때 API로부터 데이터를 가져와 필요한 곳에 데이터를 사용해야 하는 부분이 있었다.

API로부터 데이터를 fetch 하는 함수는 위와 같고,

먼저 APP 컴포넌트에 folderData 라는 state를 선언해 주었다. folderData 는 값으로 API에서 가져온 데이터 중 folder 객체를 갖게 된다.
또, getAPIData 함수를 선언했고 이 함수 내부에서는 앞선 코드의 getFolderData 함수의 반환값을 folder 라는 변수에 할당한 후 setter 함수를 통해 folderData 의 값을 바꾸어 주었다.
useEffect 에 이 함수를 넣어 첫 렌더링의 마지막 단계에서 한번만 실행되도록 하다보니 첫 렌더링 때 folderData 가 undefined 값을 갖게 되어 map 메소드 실행 시 오류가 났다.

이 문제를 삼항 연산자를 활용하여 isLoad state 값이 true 가 되었을 때 map 메소드를 활용하여 Card 컴포넌트에 데이터를 주입시켜 주고, 그 이전에는 로딩 중이라는 글씨만 나오도록 해 주었다.
사실 아직 이해가 안 되는 부분이 있어 조금 더 고민해 보고 내일 다시 정리해 보아야겠다.