fetch로 데이터를 잘 가져오고 있습니다
하지만 하나 시도해보셔야 할 게 있습니다
개발자 도구로 가서
네트워크 창을 열어서
스로틀링(throttling)을 활성화하고 슬로우 3G를 켠 후
새로고침을 하면
페이지가 로딩하는 데 시간이 좀 걸리는 게 보입니다
로딩이 다 되고 나면
장소를 가져오는 데에도 시간이 좀 걸립니다
이는 이미지 뿐만이 아닙니다
그리고 다시 시도해보면
처음에 장소가 아예 뜨지 않습니다
장소 데이터는 어느 시점이 지나면 갑자기 뜨는데
사용자에게 좋은 경험을 주지는 않습니다
기다리는 동안 대체(fallback) 항목이 보여진다면
더 좋을 것 같습니다
대체 텍스트나 로딩 텍스트 같은 것이
데이터가 도착하길 기다리는 동안 있으면 좋겠습니다
이제 이 places 컴포넌트는 사실
대체 텍스트 속성을 지원하며 여기에 텍스트를 지정합니다
장소가 없을 경우를 대비해서입니다
하지만 원하는 문구는 '준비된 장소가 없습니다'가 아닙니다
장소가 있긴 하지만
아직 fetch로 가져오지 않았을 뿐이므로
다른 로딩 텍스트가 보여졌으면 합니다
예를 들어, '데이터를 불러오는 중입니다...'
이게 더 좋습니다
지금은 이 places 컴포넌트가
그 속성을 지원하지 않지만 지원하게 하는 편이 좋겠죠
그리고 isLoading 같은 속성이 있으면 더 좋겠습니다
places를 기다리는 동안
True를 값으로 전달하고
데이터가 도착하면 False가 되는 것이죠
Places.jsx 에서는
이 두 개의 속성, isLoading과 loadingText를 받아야 합니다
그리고 그 속성들로 특별한 output을 출력해야 합니다
예를 들어, 이 title 바로 밑에서
확인해볼 수 있는 건
isLoading이 True인지, 그리고 True라면
클래스 이름이 fallback-text인 문단을 만듭니다
이건 형식상의 이유이고, 이 문단 안에는
loadingText를 출력합니다
이게 isLoading prop이 True일 때의 대체 메시지입니다
그리고 또 제가 보여드리고 싶은 건
다른 대체 텍스트입니다
이번엔 places가 없거나, 못 받았거나 혹은 isLoading이 True가 아닐 때 쓰기 위함입니다
여기서 !isLoading과 places 길이가 0인걸
확인해 줍니다
만약 !isLoading과 places 길이가 0보다 크다면
그럼 그땐 isLoading을 True로 지정합니다
AvailablePlaces에서는 여기에서 대체 텍스트를 확인합니다
하지만 물론 지금 이건 좋은 해결책이 아닙니다
왜냐하면 지금은 항상 저 값을 보이기 때문입니다
항상 이걸 보여주는 대신
당연히 이건 동적으로 조정되어야 하고
HTTP 요청에 따라
바뀌어야 합니다
이게 오는 중이라면, 이게 True로 설정되어야 합니다
그리고 데이터가 도착하면 False로 설정될 것입니다
그래서 이런 HTTP 요청을 보낼 땐
대부분 상태와 도착할 데이터만
관리하려고 하지 않습니다
loading 상태도 함께 관리해야 합니다
이 추가적인 상태는 isFetching과
setIsFetching이라 불러주고, 예를 들어 처음엔 False라고 칩시다
하지만 이 Effect 함수 내에서는
True로 지정합니다.
여기서 setIsFetching을 불러온 다음 이걸 True로 지정합니다
이제 places를 가져오기 시작하기 때문입니다
그리고 그거 fetchPlaces 안에서도 해줄 수 있는데
크게 상관은 없습니다
여기 데이터를 다 받았으면
이걸 다시 False로 설정해줍니다
더 이상 데이터를 가져오지 않기 때문입니다
이게 그냥 코드 세 줄이
두 상태 업데이트 사이에 있는 것 같지만
꼭 기억해두셔야 할 것은
이 과정은 몇 초 정도 걸릴 수 있습니다
그래서 시간이 조금 소요되는데
이 두 코드 사이에서 몇 초 정도 걸릴 수 있습니다
이제 이 isFetching 상태를 isLoading의 값으로 사용할 수 있고
HTTP 요청을 막 시작했는지
이미 요청을 받았는지에 따라
True나 False 값이 부여됩니다
그래서 저장하고 새로고침을 해 보겠습니다
네트워크 스로틀링은 계속 활성화해 두시기 바랍니다
그러면 당연히
리액트 코드를 가져오는 데 조금 시간이 걸립니다
하지만 준비가 되면
그 대체 텍스트가 보입니다
그 다음 장소 데이터도 마침내 보입니다
그럼 이제 스로틀링을 비활성화하겠습니다
아무튼 지금까지 데이터를 가져오는 상태에 따라
로딩 상태를 표시하는 방법을 배워보았습니다