Node.js와 React로 간단한 웹페이지를 만들어보자 8편 (기본편 完)

Angela·2022년 7월 13일

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

목록 보기

8/8

<목차>
로그인 페이지
회원가입 페이지
로그아웃
인증체크

로그인 페이지

< 로그인 문구 -밑- 이메일 입력창 -밑- 비밀번호 입력창 -밑- 확인버튼 > 식으로 로그인 페이지를 구현해보도록 하겠습니다.

현재 LandingPage는 좌측에 LandingPage 랜딩페이지 라는 문구만 뜨고 그 외에는 아무것도 없는 상태입니다. 이 화면을 약간 다듬고 가겠습니다.
수정 전의 코드와 수정 후의 코드를 모두 보여드리고 어느 부분이 바뀌었는지 설명을 추가하였습니다.
(여기에 수정 전 후 사진이 있으면 좋을 듯)

//LandingPage.js 수정 전 코드
import React, { useEffect} from 'react'
import axios from 'axios';

function LandingPage() {

  useEffect(() => { 
    axios.get('/api/hello') // get request를 서버에 보내는 코드
    .then(response => console.log(response.data)) 
  })

  return (
    <div>
      LandingPage
    </div>
  )
}

export default LandingPage

//LandingPage.js 수정 후 코드
import React, { useEffect} from 'react'
import axios from 'axios';

function LandingPage() {

  useEffect(() => { 
    axios.get('/api/hello') // get request를 서버에 보내는 코드
    .then(response => console.log(response.data)) //
  })

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',
        width: '100%', height: '100vh'}}>
      <h2>시작페이지</h2>
    </div>
  )
}

export default LandingPage

다음은 LoginPage.js입니다.

//수정 전
import React from 'react'

function LoginPage() {
  return (
    <div>
      LoginPage
    </div>
  )
}

export default LoginPage

일단 1차 수정에서는 로그인을 위해 이메일과 패스워드를 입력할 칸을 만들고, 로그인 버튼도 만든 다음에 각각이 다 한줄에 하나씩만 위치하도록 했습니다.
그리고 그 모든 것들을 가운데로 정렬하였습니다.

//1차 수정 후
import React from 'react'

function LoginPage() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',
    width: '100%', height: '100vh'}}>
      
    <form style={{ display: 'flex', flexDirection: 'column' }}>
    	//form에 스타일을 준게 한 줄에 하나씩 칸과 버튼이 위치하도록 하게 한 것이다.
      <label>Email</label>
      <input type="email" value onChange />
      <label>Password</label>
      <input type="password" value onChange />
      <br />
      <button>
        Login
      </button>
    </form>

    </div>
  )
}

export default LoginPage

1차 수정이 마치면 겉모습은 그럴 듯하게 만들어져 있지만 정작 칸에서 타이핑이 되지 않는다는 것을 발견할 수 있습니다. 이렇듯 칸에 타이핑을 하고 타이핑한 정보를 서버에 전달하기 위해서는 코드에 추가해야할 것들이 있습니다. onChange라는 부분을 중점으로 바뀝니다.
그 전에 value에 state를 부여해야하는데요. 안의 코드에서 데이터를 바꾸려고 할 때엔 state를 변화시킴으로써 데이터를 바꿉니다.