개발/[시리즈] DRF + React

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

2022. 9. 1. 09:31
목차
  1. HTML 작성하기
  2. Login 컴포넌트 작성하기
  3. Signup 컴포넌트 작성하기
반응형

시리즈 6번째 글입니다.

 

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

 

HTML : 폼(form) 이해

폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이

www.nextree.co.kr

위 링크를 참조했습니다.

 

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 구현으로 잠시 넘어가보도록 하겠습니다.

728x90

'개발 > [시리즈] DRF + React' 카테고리의 다른 글

[DRF / React] 장고 리액트 연동하기 - 8. Django 기초 개념  (0) 2022.09.08
[DRF / React] 장고 리액트 연동하기 - 7. Django 프로젝트 설정하기  (0) 2022.09.02
[DRF / React] 장고 리액트 연동하기 - 5. 리액트 Components 와 Props  (0) 2022.08.30
[DRF / React] 장고 리액트 연동하기 - 4. 리액트 컴포넌트 이동  (0) 2022.08.29
[DRF / React] 장고 리액트 연동하기 - 3. 리액트 개별 페이지 구현  (2) 2022.08.27
  • HTML 작성하기
  • Login 컴포넌트 작성하기
  • Signup 컴포넌트 작성하기
'개발/[시리즈] DRF + React' 카테고리의 다른 글
  • [DRF / React] 장고 리액트 연동하기 - 8. Django 기초 개념
  • [DRF / React] 장고 리액트 연동하기 - 7. Django 프로젝트 설정하기
  • [DRF / React] 장고 리액트 연동하기 - 5. 리액트 Components 와 Props
  • [DRF / React] 장고 리액트 연동하기 - 4. 리액트 컴포넌트 이동
Junhyung-Choi
Junhyung-Choi
Junhyung-Choi
TheOldFace 개발 블로그
Junhyung-Choi
전체
오늘
어제
  • 분류 전체보기 (29)
    • 개발 (29)
      • 개발환경 설정 (4)
      • 문제풀이 (6)
      • Unity (2)
      • [시리즈] Unity 튜토리얼 (0)
      • Django (0)
      • [시리즈] DRF + React (8)
      • 이슈 해결 모음 (6)
      • [시리즈] Effective C++ (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • M1 MacBook
  • 문제풀이
  • Python
  • 원티드
  • django
  • 파이썬
  • Shell
  • 쇼미더코드3차
  • React
  • 쇼미더코드 3차
  • #ec++
  • 개발
  • c++
  • 백준
  • ec++
  • unity6
  • BOJ
  • 알고리즘
  • zsh
  • mediapipe

최근 댓글

최근 글

hELLO · Designed By 정상우.
Junhyung-Choi
[DRF / React] 장고 리액트 연동하기 - 6. 로그인, 회원가입 창 구현(Form)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.