저번 시간까지 커스텀 훅 작업을 마쳤습니다
이제 여기서 훅을 사용하고 있는데
이제는 이 다양한 상태를 사용해서
더 나은 사용자 경험을 제공하겠습니다
음식 컴포넌트에서 시작하겠습니다
그리고 이후에는 물론 결제 컴포넌트로 넘어가서
여기에서도 이 훅을 사용하겠습니다
일단은 음식 컴포넌트로 돌아가겠습니다
페이지로 돌아가서 스로틀링을 사용해 로딩을 해 보면
정확히 말하면 네트워크를 스로틀링하면
페이지가 새로고침되면서
물론 로딩하는 데에 시간이 걸리겠지만
'메뉴 가져오는 중' 문구를 볼 것입니다
여기 있습니다
이 문구 형식이 아주 훌륭하지는 않았습니다
왼쪽으로 너무 치우쳐 있기도 했습니다
이 문제는 여기에 className으로 중앙인 center를 더하면
해결할 수 있습니다
이제 새로고침을 해 보면 개선이 되었습니다
아주 빠르고 간단한 작업이었습니다
물론 다음으로 작업하고 싶은 것은
음식 메뉴를 로딩하지 못할 때
에러가 생길 수도 있다는 점입니다
해결방안으로는 컴포넌트를 하나 추가해서
파일 이름은 에러로 하겠습니다
이 컴포넌트의 목적은
에러 메시지를 반환하는 것입니다
먼저 className이 error인 div를 하나 반환하고
여기에 제목과 메시지를 만들겠습니다
둘 다 외부에서 설정이 가능한 내용입니다
여기에는 제목, 여기에는 메시지를 가져오겠습니다
그리고 여기에서는 제목을 반환하고
여기는 메시지를 반환하겠습니다
이 컴포넌트를 더함으로써
이제 Meals 컴포넌트로 돌아가서
에러가 있는지 확인만 하면 됩니다
여기에 방금 만든 에러 컴포넌트를
추가하겠습니다
여기에서 가져와서 반환하고
제목을 '메뉴를 가져오는데 실패함'이라고 하겠습니다
메시지는 에러라는 객체가 됩니다
커스텀 훅에서 에러가 있을 경우에는
에러 메시지에 에러 상태를 설정했기 때문입니다
에러 상황을 만들기 위해
잘못된 URL 주소를 입력해 보겠습니다
저장하고 스로틀링을 끄고 새로고침을 해 보면
이 에러가 나옵니다
물론 이 메시지의 디자인적 형식과
전반적인 사용자 경험은 개선될 수 있겠지만
일단은 다양한 상태를 사용하면서
커스텀 훅이 작동하는지는 확인했습니다
이제는 다시 이 주소를 제대로 변경하겠습니다
이제 새로고침을 해 보면
다시 모든 메뉴가 정상적으로 보입니다
이제야 비로소 다음 시간에
결제 페이지 작업을 하면서
결제 컴포넌트 안에서도
커스텀 훅을 쓰도록 하겠습니다