시작전에
리액트 공식문서 참고
회원가입 UI 구현
피그마로 대충 만들어왔다🤪
먼저 UI를 만들기 위해 vscode에서 회원가입 페이지 RegisterPage.js 로 이동한다.
return ()안에 작업하면 되는데 리액트에서는 jsx라는 문법을 사용하기 때문에 HTML작성하고 좀 다르다..
div로 일단 감싸줘야 한다.
class를 줄때는 ClassName='클래스명'이렇게 줘야 한다.
맨 바깥 <div>를 ClassName='auth-wrapper'로 준다.
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.
리액트 라우터가 설치되어있는 상태에서는 <a>태그는 <Link>로 대체한다.
Link를 자동완성 시키면 윗줄에 import로 자동으로 추가된다.
input의 value값은 나중에 변경할때 써야하므로 ""(빈값)으로 놔둔다.
인라인 스타일링도 가능하다. 중괄호로 두번 감싸줘야 하고 text-decoration 속성이름도textDecoration이라고 입력해줘야 한다.
여기까지 하고 react run start로 실행시킨 후 주소창에localhost:3000/register를 입력하고 회원가입페이지로 접속한다.
오 들어갈건 다 들어갔다. 스타일링도 들어가있다.
기본마진이랑 패딩이 적용되어있지 않은데 아마 react-bootstrap 을 설치해서 그런것 같다.
이제 본격적인 스타일링을 해보자
/src/css 폴더에 auth.css 파일을 만들어준다.
그리고 HTML에서 CSS를 링크해주듯이 index.js에 가서 import './css/auth.css';로 auth.css파일을 불러와 적용시켜준다.
여기서 부터 auth.css파일을 가지고 일반 CSS처럼 작성하면 된다.
다됐다 이제 기능을 구현할 차례
회원가입 기능구현
회원가입 form에 아이디와 비밀번호를 입력하고 제출하면
clayful 서버에 요청을 보내 데이터를 등록시키도록 만들어보자.
1. state 사용하기
다 만들었는데 이상한 점이 있다.
인풋란에 아무리 키보드를 쳐봐도 입력되지 않는다.
이것을 state라는 것을 이용해서 입력할 수 있게 바꿔보자.
HTML에서
<input>,<textarea>,<select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
시작하기 전에 맨윗줄 import React다음에 ,{ useState }를 추가해 리액트에서 스테이트기능을 가져온다.
리액트에는 한 컴포넌트에서 데이터를 다룰때 사용하는 state라는게 있다.
email 주소를 입력할때 저 위에 코드에 보이는 email 안에 넣게된다.
[email, setEmail] 중에 첫째 email을 state라고 하며,
둘째 setEmail를 이용해서 state를 변경시킬 수 있다.
useState(initialState)에서 initialState은 처음에 email이라는 state의 초기값을 나타내고 있다.
<input> 안에 아무것도 입력하지 않았을때니까 처음은 빈값("")이 된다.
이제 폼태그쪽으로 와서 input을 작성할때 비워뒀던 value값에 아무말이나 써보자
value 값을 바꾸면 인풋안의 글자가 바뀐다는걸 알 수 있다.
이제 input의 value값에 state인 email을 중괄호로 감싸서 넣어보자. value={email}
이제 value값을 {email}을 통해 동적으로 변화시킬 준비가 됐다.
JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다. 예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식입니다.
2. onChange - 에 키보드 입력값 받기
<input> 태그 안에 input값이 바뀔때 이벤트를 발생시키는 onChange 를 넣어준다.
키보드로 입력할때마다 setEmail로 email state를 변경시킨다.
onChange={handleChange}
input에 onChange이벤트가 발생하면 handleChange라는 함수를 실행시킨다.
const handleChange = (e) => {
setEmail(e.target.value);
}그리고 위에 handleChange함수를 선언해준다.
그런다음 다시 인풋에 입력해보자
이제 인풋안에 이메일을 입력할 수 있게됐다.
const handleChange = (e) => {
console.log("e.target.value", e.target.value);
setEmail(e.target.value);
}콘솔 로그로 e.target.value가 무슨 값을 받아오는지 확인해보자.
키보드를 입력할때마다 <input>안의 값이 찍히는걸 볼 수 있다.
e.target.value는 <input>안의 value 값임을 알 수 있다.
setEmail(e.target.value);
input안의 value 값(키보드를 입력했을때)을 setEmail()에 넣으면 이 값이 email의 값이 된다.
비밀번호도 똑같은 방법으로 적용한다.
const [email, setEmail] = useState(initialState);
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
<input onChange={handlePasswordChange}
placeholder="비밀번호를 입력해주세요"
type="password"
value={password} />
3. onSubmit - 버튼 누르면 회원가입 되게 만들기
3-1. Submit(회원가입) 버튼 눌렀을때 요청보내기
form에 onSubmit이벤트를 붙여준다.
submit type의 버튼을 눌렀을때 이벤트를 발생시킨다.
<from onSubmit={handleSubmit}>onSubmit이벤트는 페이지를 한번 리프레쉬 시켜주는데 이러면 state 값이 모두 초기화되기때문에
event.preventDefault() 를 이용해 이를 막아준다.
const handleSubmit = (e) => {
e.preventDefault()
}제출 버튼을 눌렀을때 onSubmit 이벤트가 발생하고 handleSubmit 함수를 호출
3-2. 고객 가입 코드 추가
이제 handleSubmit 함수 안에 클레이풀에서 제공하는 고객가입 코드를 추가하면 된다.
var Customer = Clayful.Customer;
var payload = {
userId: 'user_id',
email: 'user@example.org',
password: 'secure_password',
};
Customer.createMe(payload, function(err, result) {
if (err) {
// Error case
console.log(err.code);
}
var data = result.data;
console.log(data);
});var Customer = Clayful.Customer; 에서 Customer를 사용하기 위해서
import Clayful from 'clayful/client-js'로 Clayful을 불러온다.
client-node는 node.js를 이용해 서버사이드로 개발할때 필요하고
지금은 클라이언트 사이드에서 개발하기 때문에 client-js를 사용한다.
var payload = {
userId: 'user_id',
email: 'user@example.org',
password: 'secure_password',
};위쪽의 코드에서 email과 password 값에 각각 위에서 설정한 스테이트인
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
의 email과password를 추가하면 된다.
userId프로퍼티는 설정하지 않았으니 지워도 상관없다.
var payload = {
email: email,
password: password,
};여기서 키(email)와 벨류(email)이 이름이 같을때(email: email)는 하나로 합쳐서 생략이 가능하다.
var payload = {
email,
password,
};
console.log(payload);3-3. 요청과 응답 확인하기
console.log(payload);를 입력하고 payload에 어떤값이 들어오는지 확인해보자
로그인페이지에서 이메일과 비밀번호를 입력한 뒤 회원가입버튼을 누른다.
payload에 넣은 입력값은 보이지만 400 Bad request가 나오는데
8자 미만인 비밀번호를 입력할 시 클레이풀 API에서 자체적으로 요청을 막기때문에 발생하는 에러다.
8자 이상의 비밀번호를 넣고 다시 회원가입을 한다.
이번엔 정상적으로 요청이 들어가고 응답값을 볼 수 있다.
Array를 펼쳐보면 클레이풀 API에서 회원가입 form에서 요청받은 값에 대해
응답한 여러가지 회원정보 값들을 볼 수 있다.
아까 입력한 email값이 들어가 있는걸 볼 수 있고, 생성일자도 확인 할 수 있다.
