컴포넌트 라이브러리 활용
UI 컴포넌트 라이브러리를 사용하면 일관된 스타일의 컴포넌트를 쉽게 구현할 수 있다.
Material-UI, Ant Design, Bootstrap 등과 같은 라이브러리를 사용하면 더 빠르게 웹사이트를 구축할 수 있다.
LoginForm.js
import React from "react";
import {
Box,
Container,
Typography,
TextField,
Button,
FormControlLabel,
Checkbox,
} from "@mui/material";
function LoginForm() {
return (
<Container maxWidth="sm">
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: 4,
}}
>
<Typography variant="h4" sx={{ marginBottom: 3 }}>
Login
</Typography>
<TextField
label="Email"
type="email"
variant="outlined"
fullWidth
required
sx={{ marginBottom: 2 }}
/>
<TextField
label="Password"
type="password"
variant="outlined"
fullWidth
required
sx={{ marginBottom: 2 }}
/>
<FormControlLabel
control={<Checkbox />}
label="Remember me"
sx={{ marginBottom: 2 }}
/>
<Button variant="contained" color="primary" fullWidth>
Login
</Button>
</Box>
</Container>
);
}
export default LoginForm;
이렇게 간편하게 기존에 제공되는 컴포넌트 라이브러리를 사용하게 되면 금방 로그인 폼이 완성된다.
또한 디자인을 다음과 같은 방법으로 좀 더 최근 트렌드에 맞춰서 변경 할 수 있다.
로딩 애니메이션 구현
로딩 애니메이션은 사용자에게 작업 진행 상황을 알리고, 기다리는 동안 지루하지 않게 해준다.
사용자 경험을 향상시키기 위해 로딩 애니메이션을 추가할 수 있다.
App.js 수정
import { CircularProgress } from "@mui/material";
모듈 추가하기
const App = () => {
const [selectedMenu, setSelectedMenu] = useState("");
const handleButtonClick = (menu) => {
setLoading(true);
setTimeout(() => {
setSelectedMenu(menu);
setLoading(false);
}, 1000);
};
const renderContent = () => {
switch (selectedMenu) {
case "Menu1":
return <ResponsiveDesign />;
default:
return null;
}
};
return (
<ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
<GlobalStyle />
<div className="App">
<AppBar position="static">
<Toolbar>
<Typography variant="6" component="div" sx={{ flexGrow: 1 }}>
React Page
</Typography>
<Button color="inherit" onClick={() => handleButtonClick("Menu1")}>
반응형 디자인
</Button>
</Toolbar>
</AppBar>
<Container>
<Box mt={4}>
{loading ? (
<CircularProgress
sx={{
position: "absolute",
top: "50%",
left: "50%",
marginTop: "-25px",
marginLeft: "-25px",
}}
/>
) : (
renderContent()
)}
</Box>
</Container>
</div>
</ThemeProvider>
);
};
이제 상단바에 있는 버튼을 클릭해보자.
물론 강제 1초동안 나오게 하고, 뒤에 로딩되도록 만들었지만, 어느페이지가 됐던간에 로딩이 완료되도록 제일 먼저 띄워주는게 좋을 듯 싶다.