프론트엔드의 꽃, 리액트 5주차 정리 (Material UI, Firestore 데이터 로드 여부로 조건부 렌더링)

Material UI

공식 문서

→ https://material-ui.com/

Material-UI: A popular React UI framework

 

설치하기

yarn add @material-ui/core @material-ui/icons

 

사용하기

Detail.js

import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
...

const Detail = (props) => {
	...
	return (
		...
		<ButtonGroup>
			<Button
				variant="outlined"
				onClick={() => { /*생략*/ }}
			>삭제하기</Button>
			<Button
				variant="outlined"
				onClick={() => { /*생략*/ }}
			>완료하기</Button>
		</ButtonGroup>
		...
	);
};

export default Detail;

 

---

페이지 의도적으로 가리기

페이지 가리기가 필요한 이유

• 현재는 redux에 넣어둔 초깃값 (가짜 데이터) 이 먼저 보인다.
• Firestore의 데이터만 제대로 보여주기 위해 데이터를 가져오기 전까지는 페이지를 가린다.
• 수정 또는 추가하기 버튼을 눌렀을 때 API를 여러번 호출하는 현상도 방지할 수 있다.

 

로딩 스피너 만들기

로딩 스피너 컴포넌트 만들기

• 머터리얼 UI 아이콘 이용

import React from 'react';
import styled from 'styled-components';
import {Eco} from '@material-ui/icons';

const Spinner = (props) => {
	return (
		<Outter>
			<Eco style={{color: '#673ab7', fontSize: '150px'}}/>
		</Outter>
	);
}

const Outter = styled.div`
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ede2ff;
`;

export default Spinner;

 

bucket.js

• initialState에 is_loaded 변수를 추가해서 firestore에서 데이터를 받아오면 갱신하도록 함

const initialState = {
	is_loaded: false,
	list: [
		{text: '영화관 가기', completed: false},
		{text: '매일 책읽기', completed: false},
		{text: '수영 배우기', completed: false},
	],
};

...
	case 'bucket/LOAD': {
		if (action.bucket.length > 0) {
			return {list: action.bucket, is_loaded: true};
		}
		return state;
	}

 

App.js

• is_loaded 값에 따라 조건부 렌더링을 한다.

const mapStateToProps = (state) => {
	bucket_list: state.bucket.list,
	is_loaded: state.bucket.is_loaded,
});
...
render() {
	<div className='App'>
		<Container>
			<Title>내 버킷리스트</Title>
			{!this.props.is_loaded ? (
				<Spinner/>
				) : (
					<React.Fragment>
						<Progress />
						<Line />
						<Switch>
							...
						</Switch>
						</React.Fragment>
				)}
			</Container>
		...