프로그래머스 고양이 사진 검색 사이트 - 개발 (로딩 UI 적용)

App.js에서 요청이 일어나는 모든 부분에 다음과 같이 추가해줍니다.

• try-catch를 통해 예외처리
• loading 시작
• 상태 업데이트 또는 에러
• loading 종료

위 로직에 따라 처리하면 다음과 같은 형태로 이루어집니다.

const example = new Example({
	$app,
	initialState: [],
	onEvent: async (data) => {
		//loading 시작
		this.setState({
			...this.state,
			loading: true,
		});
		try {
			const response = await request();
			//상태 업데이트 시 loading 종료
			this.setState({
				...this.state,
				data: response.data,
				loading: false,
			});
		} catch (e) {
			//에러 발생 시 loading 종료
			this.setState({
				...this.state,
				loading: false,
			});
			throw new Error(e.message);
		}
	}
})