React - 서버로 데이터 요청시 에러, 로딩 상태 추가

fetch 혹은 axios를 통해 서버로부터 데이터를 보내거나 가져올 수 있다.
이때 데이터를 요청하는 동안 발생하는 로딩시간동안의 UI, 에러가 발생했을때의 UI를 만들어 보자.

1. 로딩, 에러의 상태를 저장할 state 생성

const [loading, setLoading] = useState(false);
const [error, setError] = useState(undefined);

2. 로딩 : 서버로 데이터를 요청하는 event가 발생하면 useEffect()내부의 코드가 실행되는데 가장 먼저 로딩화면을 보여주기 위해
   에러 : undefined로 초기화시켜줌

useEffect(()=>{
	setLoading(true);
	setError(undefined);
});

3. 에러 : .catch 문으로 에러 발생시 보여줄 UI를 꾸며줌
   로딩 : .finally 문으로 useEffect가 끝날때 마지막에 로딩 state를 false로 다시 만들어줌

.catch((e) => {
	setError('에러 발생');
}
.finally(() => { setLoading(false) })

4. 로딩, 에러의 state에 따른 UI를 보여주기 위한 조건문을 작성

if(loading) return <p>Loading...</p>
if(error) return <p>{error}</p>

(로딩, 에러 발생시 보여줄 UI는 컴포넌트로 따로 만들어주면 더 좋고)

😢발생한 문제점

• 현재 checkbox의 클릭 여부에 따라 sale상품을 보여주는 코드인데 에러, 로딩 UI를 만든 후에 체크를 해도 잠깐 체크 표시가 되었다가 로딩이 끝나면 체크가 사라지는 버그 발생.

-> checkbox input 안에 속성으로 checked={checked} 를 넣어줘서 해결함
(체크 여부 상태를 저장한 checked라는 state를 넘겨준것임)