<React + Vue.js> 프로젝트 내 회원가입 기능 구현 가이드

 

 

1. 서론

 

이번 글에서는 React 회원가입 모달 컴포넌트를 구성하는 방법을 다룹니다. 사용자로부터 입력을 받고, 이를 더미 서버(JSON Server)와 통신하여 회원 정보를 등록하는 과정을 단계별로 설명합니다. 또한, try-catch-finally를 활용한 예외 처리와 상태 초기화 방법도 포함했습니다. 

 

2. 주요 기능

• 입력 필드 관리: useState로 입력값 상태를 관리하여 폼 제출 시 데이터를 전송합니다.

• 비동기 서버 통신: axios를 사용하여 회원가입 요청을 처리합니다.

• 모달 닫기 기능: 부모 컴포넌트에서 전달받은 함수로 모달 창을 닫습니다.

• 유효성 검사: 입력 필드 검증과 에러 메시지를 출력합니다.

• 예외 처리: try-catch-finally 구문을 활용해 성공 및 실패 시 UI 상태를 변경합니다.

 

 

3. 회원가입 모달 컴포넌트 단계별 구현

처음 자바스크립트 혹은 리액트를 배울때 무작정 배우는 것 보단, 사실 단계별로 차례차례 따라가는 것이 좀 더 바람직한 방식이라고 생각합니다. 그에따라 단계별로 소개하겠습니다.

 

Step 1. 상태 선언 및 onChange 핸들러 작성

 

먼저 useState를 사용하여 입력 필드에 입력된 값을 저장하고, onChange 이벤트 핸들러로 상태를 업데이트합니다.

여기서 해당 상태들은, dummy Server(JSON server)의 각 객체 내의 속성값들입니다.

const [email, setEmail] = useState('');
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false); // 로딩 상태 관리

 

그 이후, onChange 핸들러는 각 필드의 상태를 변경하도록 작성합니다.

const handleEmailChange = (e) => setEmail(e.target.value);
const handleNameChange = (e) => setName(e.target.value);
const handlePasswordChange = (e) => setPassword(e.target.value);

 

Step 2. 회원가입 폼 UI 작성

 

아래와 같은 input 필드를 사용해 이름, 이메일, 비밀번호 입력을 받습니다. onSubmit 이벤트 핸들러를 작성하여 폼 제출 시 데이터를 전송합니다.

 

구현한 스타일은 생략하겠습니다.  

<form onSubmit={handleSubmit}>
  <input
    type="text"
    placeholder="이름"
    value={name}
    onChange={handleNameChange}
  />
  <input
    type="email"
    placeholder="이메일"
    value={email}
    onChange={handleEmailChange}
  />
  <input
    type="password"
    placeholder="비밀번호"
    value={password}
    onChange={handlePasswordChange}
  />
  <button type="submit" disabled={loading}>
    {loading ? '처리 중...' : '회원가입'}
  </button>
</form>

• value 속성을 통해 입력 필드에 상태를 바인딩합니다. -> 이 value속성에 state에 바인딩하는 포인트가 상당히 중요합니다!

• 로딩 중에는 버튼을 비활성화하여 중복 요청을 방지합니다.

 

Step 3. 서버 통신 및 예외 처리

 

axios를 사용해 POST 요청을 보내 회원가입 정보를 전송합니다.

const handleSubmit = async (e) => {
  e.preventDefault(); // 기본 폼 제출 동작 방지
  setLoading(true); // 로딩 상태 시작

  const newUser = {
    id: Date.now(),
    name,
    email,
  };

  try {
    await axios.post('http://localhost:3001/users', newUser);
    alert('회원가입이 완료되었습니다.');
    setEmail('');
    setName('');
    setPassword('');
    closeSignUpModal(); // 회원가입 성공 시 모달 닫기
  } catch (e) {
    alert('회원가입에 실패했습니다. 다시 시도해 주세요.');
    console.error('에러 발생:', e);
  } finally {
    setLoading(false); // 성공 및 실패 여부 관계없이 로딩 상태 해제
  }
};

Id 값은 매우 중요한 속성입니다. 데이터의 다른 속성값 ( name, email) 등이 겹칠 가능성이 존재하기에, 이를 구별하는 고유한 값이어야합니다. 프로젝트에 따라 다르겠지만 저는 현재 시점을 고유한 값으로 삼는것을 선호합니다.

 

4. 상태 초기화 및 예외 처리(try-catch-finally)

 

try-catch-finally를 사용하면 서버 통신 중 오류가 발생하더라도 코드 흐름을 유지할 수 있습니다.

• try 블록: 정상적으로 서버 요청을 시도합니다.

• catch 블록: 요청 실패 시 오류 메시지를 출력합니다.

• finally 블록: 로딩 상태를 해제하며 성공 여부에 관계없이 특정 작업을 실행합니다.

 

try {
  await axios.post(serverUrl, newUser);
  alert('회원가입이 완료되었습니다.');
} catch (e) {
  alert('회원가입에 실패했습니다.');
} finally {
  setLoading(false);  // 요청이 완료되면 로딩 상태 해제
  setEmail('');
  setName('');
  setPassword(''); // 입력 필드 초기화
}

 

우리가 위 step #2에서 input 요소의 value 속성을 해당 상태 변수에 바인딩해야 합니다. 이렇게 value 속성에 상태 변수를 연결하는 것을 State Binding이라고 합니다.

 

##. Value-State Binding이란?

 

value 속성을 React의 상태(state)와 연결하여 입력값을 제어하는 방식을 Value-State Binding 또는 **제어 컴포넌트(Control Component)**라고 합니다.

 

Key Point:

• value={state}를 통해 상태와 입력 필드를 연결합니다.

• onChange 이벤트를 사용해 입력 시 상태를 업데이트합니다.

• 상태가 업데이트되면 value 속성에 자동으로 반영됩니다.

 

리액트의 철학인 상태우선주의를 잘 따르는 방법이라고 볼 수 있겠습니다.

 

결론

 

React에서 회원가입 모달을 구현할 때 제어 컴포넌트 방식으로 상태를 관리하여 입력 필드와 상태를 동기화하면 유지보수성이 향상됩니다. 또한, try-catch-finally 구문을 사용해 성공, 실패, 항상 실행되는 코드를 분리하여 에러 처리와 상태 초기화를 효과적으로 구현할 수 있습니다.

 

실제 서비스에서는 보안을 위해 비밀번호를 암호화하여 처리하고, 인증 토큰을 발급받아야 합니다. 이를 통해 보다 안전한 회원가입 시스템을 구축해 보세요!