네트워크 탭에서 'slow 3G'로 확인해보면
로딩처리를 해주지 않았기 때문에
더보기 버튼을 누르면 아무 변화가 없고
더보기가 완료되기 전에 여러 번 클릭할 수 있다.
그럼 불필요하게 중복된 요청을 보내고
화면에도 동일한 데이터가 반복돼서 추가된 것이 보인다.
이런 문제를 막기 위해서 더보기 버튼을 누르지 못하게 해야한다.
네트워크 로딩 처리하기
네트워크 상태에 따라서 현재 네트워크가 리퀘스트 중이면 true
아니면 false값을 갖는 State를 만든다.
isLoading이라는 이름으로 State를 만든다.
handleLoad에서는 try catch문을 사용한다.
let 키워드로 result라는 변수를 선언하고
네트워크 리퀘스트 부분에만 try블록으로 감싸준다.
error는 일단 콘솔 출력만 하고 return한다.
그리고 try블록에서 리퀘스트를 시작하기 전에
isLoading의 State값을 true로 바꿔주고
리퀘스트가 성공하거나 실패했을 때 실행되도록 finally 블록을 추가해서
isLoading 값을 false로 바꿔준다.
이렇게 하면 오류가 나서 return하더라도 finally블록은 실행되기 때문에
네트워크 리퀘스트가 끝나면 항상 isLoading State값은 false가 된다.
isLoading State값은 버튼 태그에 disabled prop으로 넘겨준다.
이렇게 하면 리퀘스트가 진행중일 때 버튼이 비활성화될 것이다.
'slow 3G'로 확인해보면
네트워크 요청이 진행되는 동안에는 더보기 버튼이 비활성화 되는 것을
확인할 수 있다.
