[React] #16 마치며

해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

몇가지 작업들이 남았다.

예를 들어, 느린 인터넷 환경에서 접속시 페이지에 아무 내용도 안나와서 사용자가 사이트를 벗어날 수 있다.

로딩중인 상태를 알려주면 좋을 것 같다.

개발자 도구의 네트워크 탭에서 온라인을 느린 3G 로 변경해주면, 느린 인터넷 환경에서 접속시 상태를 체크해볼 수 있다.

초기값이 days.length == 0 이면 로딩중이라고 표시해보자.

DayList.js

결과창

Day.js

결과창

CreateWord.js

단어 추가 에서도 저장 버튼을 빠르게 여러 번 누르면 그것들이 다 요청으로 가기 때문에 어떤 결과가 나올지 예상할 수 없다.

통신 중에는 저장 버튼을 클릭할 수 없게 만들어보자.

state 를 하나 생성하자.

isLoading 이라는 state 를 하나 만들었고, 초기값은 false 로 만들었다.

isLoading 이 false 일때만, onSubmit 함수를 실행하면 된다.

isLoading 이 false 일때, setIsLoading 을 true 로 설정하고, 작업이 다 끝났을때 setIsLoading 을 false 로 바꾼다. → 통신 중에 저장 버튼을 여러 번 클릭해도 반응하지 않게 된다.

저장 버튼에도 isLoading 상태일 때, “Saving…” 이라는 문구를 띄운다.

isLoading 상태일 때, 저장 버튼의 투명도를 0.3 으로 설정한다.

결과창

지금은 메인페이지를 갔다가 day 페이지로 이동해야 한다.

양쪽에 화살표를 달아서 날짜를 바꿔보는 것도 좋아보인다. (과제)