728x90
오늘은 아이디중복 검사를 진행해보자.
관련되어 이전 내용을 참고 하고 싶다면 아래 포스팅을 확인하고 오자
📚 React
📘 App.js
import React, { useState, createContext } from 'react';
import './App.css';
import SignupContainer from './Signup';
import Login from './Login';
export const TodoListContext = createContext(); // 전역변수생성 (내보낼 수 있는)
function App() {
// 회원가입, 로그인, 회원의 Todo List 출력/추가/제거
const [signupView, setSignupView] = useState(false);
// 로그인한 회원정보 저장
const [loginMember, setLoginMember] = useState(null);
// 로그인한 회원의 todo-list를 저장
const [todoList, setTodoList] = useState([]);
return (
<TodoListContext.Provider value={{setTodoList,setLoginMember,loginMember}}>
{/* 버튼을 클릭할때마다 signupView가 true변했다가 */}
<button onClick={ () => {setSignupView(!signupView)} }>
{ signupView ? ('회원 가입 닫기') : ('회원 가입 열기')}
</button>
<div className='signup-wrapper'>
{/* signupView가 true인 경우에만 회원 가입 컴포넌트 렌더링 */}
{/* 조건식 && (true인 경우) */}
{signupView === true && (<SignupContainer/>)}
</div>
<h1>Todo List</h1>
<Login/>
<br/>
</TodoListContext.Provider>
);
}
export default App;
📘 Signup.js
import React, { useState } from 'react';
const SignupContainer = () => {
const[id,setId] = useState('');
const[pw,setPw] = useState('');
const[pwCheck,setPwCheck] = useState('');
const[name,setname] = useState('');
const[result,setResult] = useState('');
❗ -----------------------🔽 아이디 중복검사 진행 🔽 ----------------------- ❗
// 아이디 중복 검사 -> false 사용 불가 / true 사용가능 (임의지정)
const [idValidation,setIdValidation] = useState(false);
const idCheck = (inputId) => {
// inputId : 입력한 아디이
setId(inputId ) // id변수에 입력받은 아이디 대입
// 4글자 미만 검사 x (아래 함수 실행하지 않겠다.)
if(inputId.trim().length<4){
setIdValidation(false)
return;
}
fetch("/idCheck?id=" +inputId)
.then( resp => resp.text())
.then( result => {
console.log(`result:${result}`)//`` 문자열 + 안써도 된다!
console.log(typeof result)//`` 문자열 + 안써도 된다!
// number타입으로 parsing
if(Number(result)===0){ // 중복이 X -> 사용 o
setIdValidation(true)
}else{ // 중복 o -> 사용 X
setIdValidation(false)
}
})
.catch(e=>console.log(e))
}
❗ -----------------------🔼 아이디 중복검사 진행 🔼----------------------- ❗
//회원가입 함수
const signup=() => {
// 아이디가 사용 불가인 경우 (4이하거나 중복)
if(!idValidation){
alert("아이디를 다시 입력해주세요.")
return;
}
//1. 비밀번호가 일치하지 않으면 (pw !== pwCheck)
// '비밀번호가 일치하지 않습니다' alert로 출력 후 return
if(pw !== pwCheck){
alert("비밀번호가 일치하지 않습니다.")
return;
}
// *** 회원가입 요청(비동기)
fetch("/signup",{
method:"POST",
headers : {
"Content-Type" : "application/json"
},
//JS Object -> JSON
body:JSON.stringify({
id :id,
pw : pw,
name :name
})
})
.then(resp => resp.text())
.then(result => {
// result > 0 다면
// result에 '회원 가입 성공' 출력
// + 모든 입력칸(input) 내용삭제
if(result>0){
setResult("회원가입성공")
setId("")
setPw("")
setPwCheck("")
setname("")
}else{
// 아니면 result에 '회원가입실패' 출력
setResult("회원가입실패")
}
})
.catch(e => console.log(e));
}
❗ -----------------------🔽 아이디 중복검사 진행 🔽 ----------------------- ❗
return(
<div className='signup-container'>
<label>
ID :
<input type='text' onChange={e=>{
//setId(e.target.value)
idCheck(e.target.value)
}}
value={id}
className={idValidation? '' :"id-error"}
/>
</label>
<label>
PW :
<input type='password' onChange={e=>{setPw(e.target.value)}}
value={pw}/>
</label>
❗ -----------------------🔼 아이디 중복검사 진행 🔼----------------------- ❗
<label>
PW CHECK :
<input type='password' onChange={e=>{setPwCheck(e.target.value)}}
value={pwCheck}/>
</label>
<label>
NAME :
<input type='text' onChange={e=>{setname(e.target.value)}}
value={name}/>
</label>
<button onClick={signup}>가입하기</button>
<hr/>
<h3>{result}</h3>
</div>
)
};
export default SignupContainer;
① const idCheck = (inputId) => { ... 생략 }
: inputId 입력 받을때마다 변하는 값으로 return구문에 Id부분을 뜻한다.
② if(inputId.trim().length<4){ setIdValidation(false) return;}
: 입력한 inputId값이 4보다 작다면 ajax로 통신하지 않겠다라는 뜻이다.
③ if(Number(result)===0){ }
: Spring 타입에서 int타입으로 결과값을 반환해도 React 로 넘어오는 값은 String타입으로 변환되기에
Number타입으로 parsing해서 작성해줘야한다.
🤔💭 == VS === 차이
① ==
: 값이 같은지 비교
5 == 5
값이 같으니 true이다.
console.log(null == undefined);
null, undefined는 공통적으로 값이 없음을 의미하기에 true반환한다.
② ===
: 타입 및 값이 둘다 같아야한다 !
5 === 5
: 숫자(number)타입이며 같은 5라는 값을 가지고 있다.
console.log(null === undefined);
:null과 undefined는 공통적으로 값이 없음은 같지만 값의 종류가 다르기 때문에 false를 반환한다.
💻 출력 화면
728x90
'ON > React' 카테고리의 다른 글
[ React ] 회원가입 ( 로그인 / 로그아웃 ) ② (0) | 2023.09.12 |
---|---|
[ React ] 회원가입 구현 ① (0) | 2023.09.11 |
[ React ] Context API이란 ? ⑥ (0) | 2023.09.08 |
[ React ] TodoList 실습하기 ⑤ (0) | 2023.09.08 |
[ React ] State lifting up 속성 알아보기 ④ (0) | 2023.09.07 |