[PWA] (14) 회원가입/로그인 로직 살펴보기

회원가입 모달(SignUpModal)

: 사용자정의 React 컴포넌트

사용자가 입력한 정보를 기반으로 유효성 검사를 수행하고, 로컬 스토리지에 사용자 정보를 저장하는 기능

SignUpModal도 React에서 제공하는 기본 컴포넌트인가?

아니다. 사용자정의 React 컴포넌트 이다.
React는 div, button, input 같은 HTML 요소를 기반으로 컴포넌트를 작성할 수 있는 라이브러리다.
React 자체적으로 Modal이나 SignUpModal 같은 고급 UI 컴포넌트를 제공하지 않는다.
(제공해도, 사용자들이 만족하지 않을거같긴하다.)

✔️SignUpModal의 구현 방식:

이 코드에서 SignUpModal은 React의 상태 관리(useState)와 이벤트 핸들러를 사용해 동작을 정의하고 있다.
예를 들어, useState로 입력값과 에러 메시지를 관리하고, onClick 이벤트로 버튼 동작을 처리한다.

구성 요소:

• SignUpModal은 Tailwind CSS를 사용해 스타일링된 HTML 구조
• React 상태 관리 로직
• Button 컴포넌트도 별도로 정의된 공통 컴포넌트(../common/Button)를 가져와 사용하고 있다.

✔️코드의 전반적인 흐름

😺 상태 관리:

useState를 사용해 입력 필드 값과 에러 메시지를 관리한다.
예를 들어, id, password, email 등의 입력값과 idError, passwordError 등의 에러 메시지를 각각 상태로 관리한다.

😺 유효성 검사:

입력값이 올바른지 확인하기 위해 정규식을 사용한다.
예를 들어, validateId 함수는 ID가 4~12자의 대소문자 또는 숫자인지 확인한다.
유효성 검사 정규식은 검색해서 사용하기.

😺 회원가입 처리:

handleSignUp 함수에서 입력값을 유효성 검사한 뒤, 로컬 스토리지에 사용자 정보를 저장한다.
비밀번호와 비밀번호 확인이 일치하지 않으면 에러 메시지를 표시한다.

😺 모달 닫기:

onClose 콜백을 호출해 모달을 닫는다.
닫기 버튼을 누르면 모달이 닫히고
닫기 버튼이 아니더라도 배경을 클릭해도 모달이 닫힌도록 한다.

😺 UI 렌더링:

입력 필드, 에러 메시지, 버튼 등을 포함한 모달 UI를 렌더링한다.
입력값 변경 시 실시간으로 유효성 검사를 수행한다.

✔️주요 문법과 적용된 개념

1. React 상태 관리 (useState):

• useState를 사용해 컴포넌트의 상태를 관리한다.

const [id, setId] = useState(""); // 아이디 상태
const [passwordError, setPasswordError] = useState(""); // 비밀번호 에러 상태

2. 정규식 (Regular Expressions):

• 입력값의 형식을 검증하기 위해 정규식을 사용한다.

const idRegex = /^[a-zA-Z0-9]{4,12}$/; // ID 유효성 검사
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; // 비밀번호 유효성 검사

3. 로컬 스토리지 (localStorage):

• 사용자 정보를 브라우저의 로컬 스토리지에 저장한다.

const users = JSON.parse(localStorage.getItem("users") || "[]");
users.push(newUser);
localStorage.setItem("users", JSON.stringify(users));

4. 조건부 렌더링:

• 에러 메시지가 있을 경우에만 화면에 표시한다.

{idError && <p className="text-red-500 text-sm mt-1">{idError}</p>}

5. 이벤트 핸들러:

• 입력값 변경, 버튼 클릭 등의 이벤트를 처리한다.

<input
  type="text"
  value={id}
  onChange={(e) => {
    setId(e.target.value);
    validateId(e.target.value); // 실시간 유효성 검사
  }}
/>

6. 컴포넌트 분리:

• Button과 같은 공통 컴포넌트를 재사용한다.

<Button variant="primary" onClick={handleSignUp}>
  가입완료
</Button>

localStorage에 저장되는 위치와 방식

모든 사용자 정보는 localStorage의 users 키에 배열 형태로 저장된다.
현재 로그인한 사용자 정보는 localStorage의 currentUser 키에 저장된다.

1. users 배열에 저장:
   모든 사용자 정보를 저장하는 배열이다.
   localStorage에서 users 키로 저장된다.
   코드:

const users = JSON.parse(localStorage.getItem("users") || "[]");
users.push(newUser);
localStorage.setItem("users", JSON.stringify(users));

이 코드는 기존 사용자 목록(users)을 가져온 뒤, 새 사용자(newUser)를 추가하고 다시 localStorage에 저장한다.

2. currentUser에 저장:

현재 로그인한 사용자 정보를 저장한다.
localStorage에서 currentUser 키로 저장된다.
코드:

localStorage.setItem("currentUser", JSON.stringify(newUser));

이 코드는 새로 가입한 사용자를 현재 사용자로 설정하고, localStorage에 저장한다.

저장되는 데이터 구조 - newUser 객체

는 다음과 같은 구조로 저장된다:

{
  id: "사용자 아이디",
  password: "사용자 비밀번호",
  name: "사용자 이름",
  phone: "사용자 전화번호",
  email: "사용자 이메일",
  isAdmin: false // 관리자 여부
}