Django-React 로그인 연결하기(2. React 설정)

React

이제 React 앱의 설정을 하준다.

npm 을 써서 환경설정을 할거라서

node.js 를 설치한다.

npm 으로 npx 를 설치하고,

npx 로 create-react-app 으로 react App 을 생성한다.

npm install npx

npx create-react-app app

cd app
npm start

기본 세팅인 3000번 포트로 실행이 되게 된다.

React 에게 Django 에서 접근할것이라고 알려줘야한다.

// app/packed.json 하단에 proxy 를 추가한다.
"proxy": "http://localhost:8000"

src 폴더에 컴포넌트들을 저장할 폴더를 생성해준다.

src/components 폴더 생성.

그 안에 User 에 관련된 컴포넌트를 저장할 폴더를 생성한다.

src/components/user 생성

이제 Login에 쓰일 page 를 만들고 정의 해준다

// components/user/LoginPage.js
import React, { useState, useEffect } from 'react';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
		// 이미 로그인이 되어있다면 redirect
    if (localStorage.getItem('token') !== null) {
      window.location.replace('http://localhost:3000');
    } else {
      setLoading(false);
    }
  }, []);

	// 로그인 버튼 event
  const onSubmit = e => {
    e.preventDefault();

    const user = {
      username: username,
      password: password
    };

    fetch('http://127.0.0.1:8000/auth/login/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    })
      .then(res => res.json())
      .then(data => {
        if (data.key) {
          localStorage.clear();
          localStorage.setItem('token', data.key);
          window.location.replace('http://localhost:3000');
        } else {
          setUsername('');
          setPassword('');
          localStorage.clear();
          setErrors(true);
        }
      });
  };

  return (
    <div>
      {loading === false && <h1>Login</h1>}
      {errors === true && <h2>Cannot log in with provided credentials</h2>}
      {loading === false && (
        <form onSubmit={onSubmit}>
          <label htmlFor='username'>username address:</label> <br />
          <input
            name='username'
            type='username'
            value={username}
            required
            onChange={e => setUsername(e.target.value)}
          />{' '}
          <br />
          <label htmlFor='password'>Password:</label> <br />
          <input
            name='password'
            type='password'
            value={password}
            required
            onChange={e => setPassword(e.target.value)}
          />{' '}
          <br />
          <input type='submit' value='Login' />
        </form>
      )}
    </div>
  );
};

export default LoginPage;

components/user 폴더에 회원가입 페이지를 생성한다.

// components/user/SingUpPage.js
import React, { useState, useEffect } from 'react';

const SignupPage = () => {
  const [username, setEmail] = useState('');
  const [password1, setPassword1] = useState('');
  const [password2, setPassword2] = useState('');
  const [errors, setErrors] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (localStorage.getItem('token') !== null) {
      window.location.replace('http://localhost:3000/');
    } else {
      setLoading(false);
    }
  }, []);

  const onSubmit = e => {
    e.preventDefault();

    const user = {
      username: username,
      password1: password1,
      password2: password2
    };

    fetch('http://127.0.0.1:8000/auth/register/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    })
      .then(res => res.json())
      .then(data => {
        if (data.key) {
          localStorage.clear();
          localStorage.setItem('token', data.key);
          window.location.replace('http://localhost:3000/');
        } else {
          setEmail('');
          setPassword1('');
          setPassword2('');
          localStorage.clear();
          setErrors(true);
        }
      });
  };

  return (
    <div>
      {loading === false && <h1>Signup</h1>}
      {errors === true && <h2>Cannot signup with provided credentials</h2>}
      <form onSubmit={onSubmit}>
        <label htmlFor='username'>username</label> <br />
        <input
          name='username'
          type='username'
          value={username}
          onChange={e => setEmail(e.target.value)}
          required
        />{' '}
        <br />
        <label htmlFor='password1'>Password:</label> <br />
        <input
          name='password1'
          type='password'
          value={password1}
          onChange={e => setPassword1(e.target.value)}
          required
        />{' '}
        <br />
        <label htmlFor='password2'>Confirm password:</label> <br />
        <input
          name='password2'
          type='password'
          value={password2}
          onChange={e => setPassword2(e.target.value)}
          required
        />{' '}
        <br />
        <input type='submit' value='Signup' />
      </form>
    </div>
  );
};

export default SignupPage;

위에서 만든 앱을 React 의 Router 를 통해서 각 url 을 입력 받았을때, 해당 페이지로 이동 하도록 해준다.

따로 component를 만들어 관리하는게 맞지만, 당장 테스트를 위해서 src/App.js 에 정의한다.

import { BrowserRouter as Router, Routes, Route, } from 'react-router-dom';
import PageHeader from './components/PageHeader';
import LoginPage from './components/User/LoginPage';
import SignupPage from './components/User/SignUpPage.js';

function App() {
  return (
    <Router>
        <Routes>           
          <Route path="/login" element={<LoginPage />}></Route>
          <Route path="/signup" element={<SignupPage />}></Route>
        </Routes>
    </Router>
  );
}
export default App;

이로서 기본적인 세팅은 모두 끝났다.

django 서버를 켜두고 npm start 명령어를 통해 React-app 을 바로 실행시켜서 연결을 확인 할 수도 있고,

django 의 template 경로를 build 된 react 로 설정해놓았기 때문에, 명령어를 통해 react-app 을 build 해주고, django 서버를 실행시켜 연결해 줄 수 있다.

npm run build
python .\manage.py runserver

localhost:8000/signup 에서 회원가입,
localhost:8000/login 에서 로그인을 테스트 해볼 수가 있겠다.