(2023.11.23) (React) useState를 이용한 값 받기

이번 장에서 useState를 사용해서 회원가입을 하는 것을 만들어보겠다.

 

useState를 이용해서 동적으로 데이터 받기

function Register() {
	const [name, setName] = useState("");
    
    return (
    	<input type="text" onClick={(e) => {e.target.setName}} />
        
        
        <button type="button" class="btn btn-sparta btn-block" onclick="sign_up()">회원가입</button>
        )

위 코드에서 name 값을 useState로 받아서 입력된 값을 동적으로 바꾸는 것을 사용해서 회원가입을 할 때 입력값을 받아올 수 있다. 

이외에 이를 이용해서 이름,이메일,비밀번호를 받아서 데이터 베이스로 보내서 저장하는 것이 가능하다.

 

회원가입 버튼을 클릭시 ajax를 이용해서 데이터를 api로 보내는 코드를 확인해보겠다.

( 본 코드에서 사용하는 api 코드는 포함하지 않았기 때문에 실제 코드 사용에서 작업하신 코드를 포함하신 상태에서 사용하셔야 합니다.)

 

ajax를 사용해서 데이터 보내기

function sign_up() {
        //const nickname = $('#nickname').val();
        //const email = $('#email').val();
        const name = $('#name').val();
        //const location = $('#location').val();
        //const introduce = $('#introduce').val();
        //const favorite_weather = $('#favorite_weather').val();
        //const password1 = $('#password').val();
        //const password2 = $('#passwordCheck').val();

        //if (!nickname || !email || !name || !location || !introduce || !favorite_weather || !password1 || !password2) {
        //  customAlert('항목을 전부 채워주세요');
        // return;
        //}

        $.ajax({
          type: 'POST',
          url: '/auth/signup',
          data: {
          //  nickname: nickname,
          //  email: email,
            name: name,
          //  location: location,
          //  introduce: introduce,
          //  favorite_weather: favorite_weather,
          //  password: password1,
          //  passwordCheck: password2,
          },
          success: function (response) {
            console.log(response);
            customAlert('회원가입을 축하드립니다!', function () {
              window.location.replace('/');
            });
          },
          error: function (error) {
            customAlert(error.responseJSON.message);
          },
        });
      }

 

 

본 코드에는 이름 이외에도 입력을 받아 사용하는 코드라서 이외에 코드는 주석처리를 하였습니다. 

 

위 코드에서 /auth/signup으로 POST방식으로 데이터를 보내서 회원가입을 하는 코드로 정상적으로 데이터가 넘어가서 데이터가 들어갔을 때는 "회원가입을 축하드립니다" Alert 창이 띄웠습니다. 

또한 실패시 실패 메세지를 띄워서 어떤 부분에서 실패를 하였는지 확인할 수 있도록 작업을 하였습니다. 

 

작업을 진행하면서 느낀점

이를 작업하면서 실패를 할 경우 alert을 띄우는 것이 좋다고 생각을 했지만, 회원가입이 아닌 수정버튼을 눌러서 권한이 없는 경우에는 버튼이 안눌리도록 작업하는 것이 좋을 거 같다는 것을 알았다. 

또한 회원가입에서 사용하는 경우에는 onclick을 사용하기 때문에 클릭되지 않은 상태에서는 데이터가 보내지는 부분에서 정상적으로 안들어가는 경우가 있다는 것을 알았다.

(이를 해결하기 위해서 useRef를 사용해서 정상적으로 데이터가 보내지는 것을 확인했습니다.)