[DRF / React] 장고 리액트 연동하기 - 6. 로그인, 회원가입 창 구현(Form)

시리즈 6번째 글입니다.

 

https://www.nextree.co.kr/p8428/

HTML : 폼(form) 이해

위 링크를 참조했습니다.

 

HTML 작성하기

지난번 게시글( 2022.08.30 - [개발/[시리즈] DRF + React] - [DRF / React] 5. 리액트 Components 와 Props ) 에서 분리한 Login 과 Signup 컴포넌트를 수정해서 정보를 입력하고, 이를 백엔드로 보낼 수 있도록 양식을 만들어 볼 예정입니다.

 

어떠한 정보를 입력받고, 이를 웹 서버로 전송하기 위해서 HTML에선 주로 form 태그를 쓰는데요, 이 form 태그에 주로 사용되는 속성들은 아래와 같습니다.

출처 : https://www.nextree.co.kr/p8428/

또한 이 form 태그 안에 어떠한 정보를 입력받을 칸으로는 input 태그를 주로 사용하는데요, 이 input 태그에 주로 사용되는 속성은 다음과 같습니다.

출처 : https://www.nextree.co.kr/p8428/

 

Login 컴포넌트 작성하기

위의 HTML 과 각각의 속성을 활용해서 로그인 컴포넌트를 구성해보도록 하겠습니다.

Login.js를 열어서 아래와 같이 적어주세요.

import React from 'react'

export const Login = () => {
  return (
    <form>
      <input></input>
      <button></button>
    </form>
  )
}

export default Login;

 

 

이후

yarn start

를 통해 로그인 페이지를 확인해보면

쨔잔

약소하게나마 입력창이 나오는 걸 확인하실 수 있습니다.

 

로그인을 위해선 두개의 입력창(아이디, 비밀번호) 가 있어야 하고, 버튼 안에 "로그인" 혹은 "확인" 이라는 문구가 있어야 합니다.

코드를 다음과 같이 변경해주세요.

import React from 'react'

export const Login = () => {
  return (
    <form>
      <input name='username' placeholder='username'></input>
      <input name='password' placeholder='password'></input>
      <button>로그인</button>
    </form>
  )
}

export default Login;

자세히 보시면 아시겠지만 input 태그에 name 속성과 placeholder 속성이 추가되었고, button 안에 텍스트가 추가되었습니다.

 

Signup 컴포넌트 작성하기

회원가입 창을 구현하기 위해선 보통 비밀번호를 두번 입력해야 하므로 Login 컴포넌트를 응용해서 다음과 같이 작성해보도록 하겠습니다.

import React from 'react'

const Signup = () => {
  return (
    <form>
      <input name='username' placeholder='username'></input>
      <input name='password1' placeholder='password1'></input>
      <input name='password2' placeholder='password2'></input>
      <button>회원가입</button>
    </form>
  )
}

export default Signup

자쟌

 

고생하셨습니다.

다음 포스팅부턴 이 form을 보낼 백엔드 서버인 Django Rest Framework 구현으로 잠시 넘어가보도록 하겠습니다.