목적
회원가입 페이지를 통해 컴포넌트 간 값을 넘겨받는 것과,
조건부 렌더링을 위한 로직을 이해하기

회원가입 페이지 만들기

이전 시간에 custom Hook을 살펴보았다. 이는 여러개의 변수의 입력 및 반복되는 것을 하나로 줄일 수 있게 해준다. 이를 여러개의 인풋을 받는 회원가입 페이지를 통해 자세히 알아보자.

구성 화면

전체 코드

import FormLayout from '../../components/FormLayout'
import Store from '../../store/context'
import useInput from '../../hooks/useInput'
import {useState} from 'react'
 
const Join =()=>{
    const userid = useInput('')
    const username = useInput('')
    const password = useInput('')
    const userphone = useInput('')
    
    const [passwordCheck,setPasswordCheck] = useState('')
    const [passwordError,setPasswordError] = useState(false)
 
 
    const handlePassword=(e)=>{
        const {value}={...e.target}
        setPasswordError(password.value !== value) //같으면 false 다르면 true
        setPasswordCheck(value)
 
    }
 
    const handleSubmit=(e)=>{
        e.preventDefault();
        if(password.value !== passwordCheck){
            setPasswordError(true)
            return 0;    
        }else {
            setPasswordError(false)
        }
 
        if(!term){
            setTermError(true)
            return 0;
        }
        console.log(userid.value,password.value,)
    }
 
 
    const [term,setTerm] = useState(false) //약관 동의여부
    const [termError,setTermError]=useState(false)
 
    const handleTerm = e =>{
        console.log('handleTerm들어옴')
        setTermError(e.target.checked !== true) //체크가 뜨면 
        //true !==true  =>false 문
        //false
        setTerm(e.target.checked)
    }
 
 
    return (
        <FormLayout>
            <h2>회원가입</h2>
            <form onSubmit={handleSubmit}>
                <input type="text" {...userid}  placeholder="아이디를 입력해주세요"/>
                <input type="text" {...username} placeholder="이름를 입력해주세요"/>
                <input type="password" {...password} placeholder="비밀번호를 입력해주세요"/>
                <input type="password" value ={passwordCheck} onChange={handlePassword} placeholder="비밀번호를 다시 입력해주세요"/>
                {passwordError && <div style={{color:'red'}}>비밀번호가 일치하지 않습니다.</div>}
 
                {/* {true && 이거실행됨} {false && "이거 실행 안됨"} */}
                <input type="text" {...userphone} placeholder="전화번호를 입력해주세요"/>   <br/>
                <label htmlFor="term">약관동의여부</label><input id ="term" type ="checkbox" checked={term} onChange={handleTerm} /><br/>
                {termError && <div style = {{color:'red'}}>약관에 동의하라구...</div>}
                <button type = "submit">회원가입</button>
            </form>
        </FormLayout>
    )
}
export default Join

회원가입 로직

회원가입에는 여러개의 안전장치가 있다.

회원가입 안전장치
1. ID는 반드시 있어야 한다.
2. 비밀번호와 비밀번호 확인의 값이 같아야 한다.
3. 약관에 동의를 해야 한다.
4. 필수 항목은 다 적어야 한다.

이 네가지에 하나라도 해당되지 않으면 회원가입이 안 되어야 한다.
각 항목들을 보면서 알아보자.

여러개의 Input제어

const userid = useInput('')
id, pw, phone넘버 등 여러 인풋요소들을 지난 시간에 custom Hook을 이용해 만든 useInput함수를 써서 값을 받았다.

그리고, custom Hook을 이용해서 만든 함수들은 (나중에 다른 곳에서도 쓰일 가능성이 농후한 함수들) 따로 Hook이라는 폴더를 만들어 거기에 넣고 사용하는 것이 맞다고 한다. 왜냐하면 jsx파일들은 화면 컴포넌트 구성을 보려고 하는 것이어서 데이터를 처리하는 것이 많으면 많을수록 가독성이 좋지 않기 때문이다.

return부분에도 저번 시간에 배운 것을 이용해서
<input type="password" {...password} placeholder="비밀번호를 입력해주세요"/> 이렇게 써준다.

그리고 패스워드 확인 부분은 custom Hook이 아니라 따로 정의해준다.

비밀번호---비밀번호 확인란

return 코드 
<input 	type="password" 
		value ={passwordCheck} 
        onChange={handlePassword} 
        placeholder="비밀번호를 다시 입력해주세요"
/>

const [passwordCheck,setPasswordCheck] = useState('')
const [passwordError,setPasswordError] = useState(false)

const handlePassword=(e)=>{
        const {value}={...e.target}
        setPasswordError(password.value !== value) 
        setPasswordCheck(value)
    }
    

setPasswordError(password.value !== value)부분을 정확히 이해해야 한다. 여기서는 두가지 경우를 생각할 수 있다.
👉1. password에 입력한 값이 passwordCheck에 입력한 값과 다른 경우
setPasswordError에 true값이 들어가게 되어
passwordError=true
👉2. password에 입력한 값이 passwordCheck에 입력한 값과 같은 경우
setPasswordError에 false값이 들어가게 되어
passwordError=false

약관 동의 항목

약관에 동의해야지만 회원가입을 할 수 있게 해야한다. 약관에 동의하지도 않는데 회원가입을 한다? 그건 진짜로 법정다툼이 될 수도 있는 실마리를 제공해주는거나 다름이 없다.

1.변수선언하기

먼저 term이라는 변수를 선언해준다. 이 변수는 약관동의여부를 true,false의 boolean값으로 나타낼 것이다.
그리고 termError라는 변수도 선언해주는데, 이는 약관에 동의하지 않은 상태를 선언하는 것이다.

const [term,setTerm] = useState(false) //약관 동의여부
const [termError,setTermError]=useState(false)

2. return에 쓸 내용

 <label htmlFor="term">약관동의여부</label>
 <input	id ="term" 
 		type ="checkbox" 
        checked={term} 
        onChange={handleTerm} 
 />
 <br/>
{termError && 
 	<div style = {{color:'red'}}>
    	약관에 동의하라구...
	</div>
}

html에서는 label를 쓸 때 <label for=""></label> 이렇게 쓰고 그 부분을 클릭하면 해당하는 id 부분에 커서가 가곤 했다. 그런데 babel에서는 for을 못쓴다. 그래서 label을 쓰면서 htmlFor을 써준다.
즉, React에서는 <label htmlFor=""></label> 이렇게 서준다.

웹접근성
인터넷 페이지에는 시력이 약하거나 손떨림같은 증상이 있는 사람들도 인터넷을 사용할 수 있게 하기위해 여러가지 장치를 해놓는다. label같은 경우에는 시력이 약한 사람들 혹은 손떨림이 심해 체크박스를 선택하지 못하는 사람들을 위해서 만들어진 것이다. (요즘은 의미가 많이 변형되긴 했지만 )
<input title="">
인풋의 내용을 설명해주는 태그
<img alt="">
이미지가 로딩이 안되거나 시각장애인들을 위해 그림의 내용을 설명해주는 태그

그리고, 체크박스를 제어하는 handleTerm함수는 다음과 같이 작성한다.

const handleTerm = e =>{
        setTermError(e.target.checked !== true) 
        setTerm(e.target.checked)
    }

여기서도 e.target.checked !== true부분을 정확히 해석할 수 있어야 한다.


👉체크박스 부분에 체크가 되어있다면
e.target.checked=true가 된다.
즉, true !== true 는 거짓이므로 setTermError(false)가 된다.

그래서 가 되면 termError=false가 되는 것이다.
반대의 경우엔 termError값이 true가 될 것을 예상할 수 있다.

조건부 렌더링

{termError && <div style = {{color:'red'}}>약관에 동의하라구...</div>}

우리는 인 경우 termError=false임을 알았다.

👉{ A && B }
이 경우는 A가 참이면 B가 자동적으로 실행된다.
반면 A가 거짓이라면 B는 실행되지 않는다.
이 경우는 '거짓'이 나올 때까지 실행된다고 보면 된다.
👉{ A || B }
이 경우는 A가 참이면 B는 실행되지 않고,
A가 거짓이면 B는 실행된다.
이 경우는 '참'이 나올 때까지 실행된다고 보면 된다.

즉, 인 경우 <div style = {{color:'red'}}>약관에 동의하라구...</div>는 실행되지 않는다.
반면, 이렇게 체크박스에 체크가 되지 않았을 경우에는 <div style = {{color:'red'}}>약관에 동의하라구...</div>가 실행된다.

마지막 확인 절차

이제 모든 항목을 작성했을 것이다. 혹시라도 모를 오류를 잡아내기 위해서 전체적인 폼의 제출버튼을 눌렀을 때 실행되는 함수를 작성해보자.

const handleSubmit=(e)=>{
        e.preventDefault();
        if(password.value !== passwordCheck){
            setPasswordError(true)
            return 0;    
        }else {
            setPasswordError(false)
        }

        if(!term){
            setTermError(true)
            return 0;
        }
        console.log(userid.value,password.value,)
    }

1.비밀번호 체크

if(password.value !== passwordCheck){
            setPasswordError(true)
            return 0;    

비밀번호의 값이 다르면 passwordError를 true값으로 주고, return을 통해 handleSubmit 함수를 빠져나온다.

2.약관동의항목

if(!term){
            setTermError(true)
            return 0;
        }
        

약관 동의 항목의 체크박스가 이와 같이 체크되지 않았을 때 termError값을 true로 주고 return 0을 통해 handleSubmit 함수를 빠져나온다.

두가지가 완료가 되었다면 그 다음 절차를 진행한다.

여기까지가 간단한 회원가입 폼을 작성해보았다.