꾸준함

  • 공지
  • 방명록

ReactLoading 1

React 비동기 통신 중 로딩 스피너 띄우기

React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데, 딜레이 시간 동안 로딩 화면 혹은 로딩 모달을 띄우는 방법에 대해 소개드리겠습니다. 저는 비동기 통신 딜레이 시간 동안 스피너를 띄우기 위해 react-loading 라이브러리를 사용했습니다. yarn 혹은 npm 을 통해 다운 받아주시면 됩니다. yarn add react-loading 메시지와 함께 스피너를 화면 중앙에 띄워주기 위해 저는 아래와 같이 코드를 작성했습니다. 태그에 주목해주세요. Loader.js * 저 같은 경우에는 별도 페이지를 만들었지만 html과 css를 다룰줄 아시는 분들은 Spinner 모달을 만들고 loading state가 true일 때 해당 모달을 띄우는 방법을 사..

[DEV] 기록 2020.05.17
1
더보기
프로필사진

메일: jaimemin@naver.com

250x250

최근글과 인기글

  • 최근글
  • 인기글
  • 분류 전체보기 (2627)
    • 리서치 (13)
    • [DEV] 기록 (170)
    • 알고리즘 (1656)
      • BOJ (1238)
      • programmers (295)
      • algospot (90)
      • codewars (22)
      • koitp (8)
      • POJ (1)
      • codeforce (1)
    • 면접 준비 (22)
    • DB (114)
      • 개념 정리 (4)
      • 7day SQL 챌린지 (7)
      • 프로그래머스 SQL 고득점 Kit (13)
      • JPA (24)
      • 자바 ORM 표준 JPA 프로그래밍 (15)
      • SQL 전문가 가이드 (19)
      • MongoDB (4)
      • 몽고DB 완벽 가이드 3판 (17)
      • 마스터링 몽고DB 7.0 (6)
    • Spring (85)
      • 스프링으로 시작하는 리액티브 프로그래밍 (18)
      • Spring Security (9)
      • 스프링 시큐리티 인 액션 (13)
      • Spring WebFlux (2)
    • Redis (4)
    • Elastic Search (20)
    • Design Pattern (27)
    • Cloud (3)
    • C (86)
      • Ubuntu 사용법 (4)
      • TCPIP 소켓 프로그래밍(윤성우 저) (23)
      • 명품 C언어 프로젝트(안기수 저) (59)
    • C++ (136)
      • 열혈 C++ 프로그래밍(윤성우 저) (35)
      • 기초를 탄탄히 세워주는 C++ 프로그래밍 입문(황.. (16)
      • Fundamentals of Data Struct.. (47)
      • C++로 쉽게 풀어쓴 자료구조 (23)
      • 뇌를 자극하는 C++ STL (12)
      • Accelerated C++ (3)
    • Python (20)
      • COS Pro 1급 Python 모의고사 (10)
      • COS Pro 2급 Python 모의고사 (10)
    • JAVA (104)
      • Effective Java (90)
      • 비동기 프로그래밍 (14)
    • Kotlin (14)
      • 코틀린 코루틴의 정석 (9)
    • 학교 과제 (12)
    • 안드로이드 (2)
    • 딥러닝 (9)
      • 혁펜하임의 Easy! 딥러닝 (8)
      • 테디노트의 RAG 비법노트 (1)
    • MFC (18)
      • 윈도우 프로그래밍 (18)
    • 닌텐도 스위치 (66)
      • 닌텐도 스위치 (1)
      • 마리오 오디세이 (13)
      • 젤다의 전설 브레스 오브 더 와일드 (1)
      • 별의 커비 스타 얼라이즈 (1)
      • 모여봐요 동물의 숲 (44)
      • 슈퍼 마리오 메이커 2 (3)
      • 마인크래프트 던전스 (2)
      • 메트로이드 드레드 (1)
    • 게임 리뷰(pc+모바일) (34)
      • ibb&obb (1)
      • 스타듀 밸리(stardew valley) (32)
      • 카트라이더 러쉬플러스 (1)
    • 레고, 나노블록 (10)
      • 레고 (1)
      • 나노블록 (8)

공지사항

  • 2022년 익혀야 할 기술
  • 간단한 포트폴리오
  • KT SW 개발 합격
  • 2019년 정보처리기사 1회(실기) 후기

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • degurii의 BOJ 해설
  • 깃헙

티스토리툴바