React Suspense / 리엑트 로딩바(progress bar) 구현

React 로 만들어진 페이지에서 게시판이나 카테고리의 글 등이 나타나기 전 "로딩중..." 또는 이미지로 progress bar 가 나타나는 경우가 존재한다. 데이터를 서버로 부터 받아오기 전 비어있는 페이지, 또는 데이터를 받아온 후 레이아웃이 변경되며 페이지가 전체적으로 덜컥거리는 현상을 React Suspension 로 감출 수 있다. 일반적으로 데이터를 불러와 component 에 뿌리고 싶을 때 일반적으로 아래와 같이 코드를 작성한다. const [work, loading] = fetch data('/work') if (loading) { return } return loading 변수에 지정된 값이 true 라면 로딩중을 나타내는 식으로 말이다. 이부분을 React 의 Suspense 로 최..

2023.07.26