React 기본적인 회원가입 구현하기 - 1(목차 1번 real 기본)

목차

1. 기본적인 회원가입

2. 좀더 심화..

3. more than 심화..

 

 

우리는 앞서 함수형 컴포넌트와 Hooks에 대해서 알아보았다. 이제 우리가 공부한 것을 가지고 간단한 회원가입

양식을 만들어보려고 한다.

 

 

 

먼저 화면이 어떤식으로 렌더링되는지 보여주도록하겠다. ( CSS는 따로 안함 )

 

회원가입 Form 렌더링된 모습

그럼 이제 기본적인 회원가입의 순서부터 보도록 하자.

 

1. 기본적인 회원가입

 

import React,{useState} from 'react'

const Form = () => {
    const [values,setValues] = useState({userid:'',password:''}) // 객체

    const handleSubmit = e => {
        e.preventDefault()
        setValues({...values,userid:'',password:''})
    } 
    
    const handleChange = e => {
        const value = e.target.value
        const name = e.target.name //userid,password
        setValues({...values,[name]:value})
    }
    
    return(
        <form onSubmit={handleSubmit}>
            <h2>회원가입</h2>
            <ul>
                <li>
                    <label htmlFor="userid">아이디</label> 
                    <input type='text' name="userid" onChange={handleChange} value={values.userid} />
                </li>
                <li>
                    <label htmlFor="password">패스워드</label>
                    <input type='password' name="password" onChange={handleChange} value={values.password} />
                </li>
                <li>
                    <input type='submit' value="가입" />
                </li>
            </ul>
        </form>
    )
}

export default Form

 

 

1 .

우리는 Form 컴포넌트를 생성해서 return 값에다가 <form> 엘리먼트를 생성했고 그 안에 아이디와 비밀번호를 입력할 수 있고 가입할 수 있는 input 박스를 생성했다. 

 

 

input 박스 안에는 name의 값과 사용자가 박스에 값을 적었을 때 값의 최신화된 값을 가져올 수 있는 이벤트인 onChange를 썼고 value를 지정해서 onChange를 통해 가져온 최신화된 값을 value에다가 넣을 것이다.

 

 

 

2.

그러면 먼저 Hooks를 이용해서 상태값을 만져보도록 하자. 구조분해할당을 이용해서 배열 안에 [ values, setValues ] 를 넣고 useState( ) 인자값에는 userid와 password에 해당하는 객체를 넣었다.

저번에도 설명했지만 values는 현재의 상태값을 나타내는 것이고, setValues를 통해서 현재의 상태값을 바꿀 수 있다.

 

 

 

 

3.

자 그러면 onChange 이벤트에 대한 함수명을 handleChange로 만들어보자. handleChange 함수에는 value와 name이라는 두 변수명을 선언해주고 각각 그 안에 e.target.value , e.target.name 이라는 값을 넣어준다.

 

 

e.target.value의 의미는 사용자가 input박스에 내용을 적었을 때의 값을 가져올 수 있게 지정해주는 것이고

e.target.name의 의미는 사용자가 현재 어떤 name의 해당하는 input박스에 쓰고있는지에 대해 지정해주는 것이다.

 

 

그래서 결과값을 콘솔로 해서 보면 

 

 

 

이런식으로 첫 번째 줄이 console.log(value)에서 나온 값이고 두 번째 줄이 console.log(name)을 해서 나온 값이다.

마지막 세 번째 줄은 useState( )에 해당하는 values값을 콘솔했을 때 나온 값이다. ( 4번에서 좀 더 설명하도록 하겠다)

 

 

 

4.

자 그러면 이제 e.target으로 해당하는 값을 가져왔으니 setValues를 통해서 상태값을 바꿔보도록 하자. 

먼저 values 값을 가져오기 위해 스프레드 연산자를 통해 가져오고 변경하고자 하는 값을 적도록 하자.

 

 

여기서 우리는 계산된 프로퍼티(computed property)를 사용할텐데 계산된 프로퍼티란 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부릅니다.

 

 

사용하는 방법은 위의 코드처럼 [name]이라는 프로퍼티 이름을 우리가 아까 변수로 설정했던 name에서 가져오겠다는 의미이다. 그러면 우리가 name이라는 변수명에서 가져왔던 e.target.name을 통해서 각 input박스에 해당하는 name 값이 나타날 것입니다. ex) userid, password

 

 

그러면 계산된 프로터티를 통해서 [name] 값이 각각 userid, password가 들어갈 것이고 그에 해당하는 value값이 바뀔 것입니다. 그게 아까 콘솔에서 보여준 세번 째 줄의 콘솔입니다. 

 

마지막으로 input박스 value로 지정한 곳에 setState{values.userid}, {value.password}로 값을 넣어주자.

 

 

 

5.

마지막으로 handleSubmit 함수를 만들어서 가입버튼을 누르면 input박스의 내용이 없어지게 만들었다.