프론트 엔드, 백 엔드 간에 http 통신을 위해 사용 하는 메서드
.then((response) => response.json())
첫 번째 then에서는 server에서 보내준 response를 Object 형태로 변환합니다..then((result) => console.log("결과: ", result));
두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다.위 예제 코드에서는 콘솔을 출력하고 있지만, 사실 이 부분에 분기 처리하는 로직이 구현 됩니다. 예를 들어,
import { useNavigate } from 'react-router-dom';
import './LoginForm.scss';
function LoginForm({ loginValues, onChange }) {
const { id, password } = loginValues;
const navigate = useNavigate();
const isInputValid =
id.includes('@') && id.length >= 6 && password.length >= 6;
const goToMain = () => {
fetch('http://10.58.4.238:8000/users/login', {
method: 'POST',
body: JSON.stringify({
email: id,
password: password,
// name: '래영',
// phone_number: '010-1111-111',
}),
})
.then(response => response.json())
.then(result => {
// console.log(result);
if (result.token) {
//localStorage.setItem('token', result.token);
alert('환영합니다!');
navigate('/main-han');
} else if (result.message === 'INVALID_USER') {
alert('ID와 PW를 확인해주세요.');
}
});
};
return (
<form className="loginForm">
<h1>Westagram</h1>
<input
id="id"
name="id"
className="userId"
type="text"
placeholder="전화번호, 사용자 이름 또는 이메일"
onChange={onChange}
/>
<input
id="password"
name="password"
className="userPassword"
type="password"
placeholder="비밀번호"
onChange={onChange}
/>
<button
type="button"
className={`loginButton ${isInputValid ? 'loginBtnLive' : ''}`}
onClick={goToMain}
disabled={!isInputValid}
//style={style}
>
로그인
</button>
<div className="findPassword">
<a href="#">비밀번호를 잊으셨나요?</a>
</div>
</form>
);
}
export default LoginForm;
onChange이벤트를 통해 inputvaild 변수에서 유효성 검사 실시. (백엔드와 조건문을 맞춰야 함)
onClick이벤트 발생 시 goToMain함수 실행.
( key명은 백엔드와 맞춰야 함 )
회원가입 후, 로그인 실시. 백엔드에서 온 response가 토큰일 경우 로컬스토리지에 저장하고, 알림창 띄운 후, 메인 화면으로 이동.
💡
위 사항들은 개발자 도구의 네트워크 탭
에서 전부 확인할 수 있습니다 👐