영화목록 (netflix) 앱 번외편 - 사용자 정보 유효성 검증

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Input, Button } from 'components'
import './Register.css'

const Register = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id'? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const handleRegister = () => {
        // 사용자 정보가 있으면 로그인 페이지로 이동하기
        if(JSON.parse(sessionStorage.getItem('user'))){
            navigate('/login')
        // 사용자 정보가 없으면 사용자를 생성하고 홈페이지로 이동하기
        }else {
            // 사용자 정보를 입력하지도 않고 그냥 버튼 누르면 곧바로 데이터 저장해버림
            if(id !== '' && password !== ''){
                sessionStorage.setItem('user', JSON.stringify({ id, password }))  
                navigate('/home')
            }else{
                alert('You need to give right user info.')
            }
            
        }
    }
    return (
        <div className='register-container'>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/>
            <Button handleClick={handleRegister}>Register</Button>
        </div>
    )
}
export default Register

Register.js 파일을 위와 같이 수정하자!

사용자가 사용자 정보 입력없이 Register 버튼을 클릭하면 경고창을 띄운다.

import React, { useReducer, useState } from 'react'
import { useNavigate } from "react-router-dom"

import { Input, Button } from 'components'
import './Login.css'

const Login = () => {
    const [id, setId] = useState('')
    const [password, setPassword] = useState('')
    const navigate = useNavigate()

    const handleChange = (e) => {
        const { name, value } = e.target
        name === 'id' ? setId(value) : setPassword(value)
        console.log(name, value)
    }
    const isNotValid = (user) => {
        console.log(user)
        return user.id === '' || user.password === ''
    }
    const handleLogin = () => {
        // 사용자 정보가 있으니까 불러오기
        const user = JSON.parse(sessionStorage.getItem('user'))

        if(!isNotValid(user) && (id === user.id && password === user.password)){
            navigate('/home')
        }else{
            alert('You gaved wrong id or password !')
        } 
    }
    return (
        <div className='login-container'>
            <Input name='id' type='text' placeholder='Type ID ...' value={id} onChange={handleChange}/><br/>
            <Input name='password' type='password' placeholder='Type PASSWORD ...' value={password} onChange={handleChange}/><br/>
            <Button handleClick={handleLogin}>Login</Button>
        </div>
    )
}

export default Login

Login.js 파일을 위와 같이 수정하자!

사용자가 사용자 정보 입력없이 Login 버튼을 클릭하면 경고창을 띄워준다.