ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React/redux & react-redux & redux-saga & etc
    Language/React 2022. 8. 4. 13:06

     

    1. redux & react-redux & redux-saga 등 설치

    $ yarn add react-router-dom
    $ yarn add redux react-redux redux-saga
    
    $ yarn add @reduxjs/toolkit query-string axios
    $ yarn add ramda

     

    2. 주요소스

    2.1 index.js

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { BrowserRouter as Router } from "react-router-dom";
    import { Provider } from 'react-redux';
    import store from '~/store'
    
    import App from '~/App'
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <Provider store={store}>
        <Router>
          <App />
        </Router>
      </Provider>
    );

    2.2. reducer 설정

    import { configureStore } from "@reduxjs/toolkit";
    import rootReducer from "~/store/slices/rootReducer";
    
    const initialState = {};
    const store = configureStore({
        reducer: rootReducer,
        devTools: true,
        preloadedState: initialState,
    });
    
    export default store;
    import { combineReducers } from 'redux';
    import { authReducer } from '~/store/slices/authSlice';
    
    const rootReducer = combineReducers({
      authReducer
    });
    
    export default rootReducer;

    2.3. App.js

    import React from 'react';
    
    import RootRoutes from '~/routes';
    
    const App = () => {
      return (
        <React.Suspense>
          <RootRoutes />
        </React.Suspense>
      );
    }
    
    export default App;

    2.4 react-router

    // This is a React Router v6 app
    import { Routes, Route, Navigate } from "react-router-dom";
    import Login from '~/views/Login';
    
    import PublicRoute from './PublicRoute';
    
    const RootRoutes = () => (
      <Routes>
        <Route element={<PublicRoute />}>
          <Route path="/login/" element={<Login />} />
        </Route>
      </Routes>
    )
    
    export default RootRoutes;

    2.5 Login.js

    import React from 'react';
    import { useNavigate } from 'react-router-dom';
    import { useDispatch } from 'react-redux';
    import { useForm } from 'react-hook-form';
    
    import Avatar from '@mui/material/Avatar';
    import Button from '@mui/material/Button';
    import TextField from '@mui/material/TextField';
    import FormControlLabel from '@mui/material/FormControlLabel';
    import Checkbox from '@mui/material/Checkbox';
    import Link from '@mui/material/Link';
    import Grid from '@mui/material/Grid';
    import Box from '@mui/material/Box';
    import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
    import Typography from '@mui/material/Typography';
    import { setRefreshToken } from '~/utils/Cookie';
    import { loginUser } from '~/api/Users';
    
    function Copyright(props) {
      return (
        <Typography variant="body2" color="text.secondary" align="center" {...props}>
          {'Copyright © '}
          <Link color="inherit" href="https://github.com/dchkang83">
            Your Website
          </Link>{' '}
          {new Date().getFullYear()}
          {'.'}
        </Typography>
      );
    }
    
    function Login() {
      const navigate = useNavigate();
      const dispatch = useDispatch();
    
      // useForm 사용을 위한 선언
      const { register, setValue, formState: { errors }, handleSubmit } = useForm();
    
      return (
        <>
          <Box
            sx={{
              marginTop: 8,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in
            </Typography>
            <Box component="form" noValidate sx={{ mt: 1 }}>
              <TextField
                {...register("username", { required: "Please Enter Your Email" })}
                label="Email Address"
                margin="normal"
                required
                fullWidth
                id="email"
                name="email"
                autoComplete="email"
                autoFocus
                value={"dchkang83@naver.com"}
              />
              <TextField
                {...register("password", { required: "Please Enter Your Password" })}
    
                label="Password"
                margin="normal"
                required
                fullWidth
                name="password"
                type="password"
                id="password"
                autoComplete="current-password"
                value={"test1234"}
              />
              <FormControlLabel
                label="Remember me"
                control={<Checkbox value="remember" color="primary" />}
              />
    
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >Sign in</Button>
    
              <Grid container>
                <Grid item xs>
                  <Link href="#" variant="body2">
                    Forgot password?
                  </Link>
                </Grid>
                <Grid item>
                  <Link href="#" variant="body2">
                    {"Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </Box>
          </Box>
          <Copyright sx={{ mt: 8, mb: 4 }} />
        </>
      );
    }
    
    export default Login;

     

    3. 화면 확인

     

     

     

     

     

     

     

     

     

     

     

     

    댓글

Designed by Tistory.