[React] 통신 결과 메세지에 따라 에러메세지 보여주기

2023년 1월 13일 작성

 

프로젝트를 하면서 통신할 일이 많았다. 통신을 하면서 많이 한 일은 백엔드에서 보내주는 통신 결과 메세지에 따라 에러메세지를 보여주는 것이었다. 대표적인 예가 회원가입이다.

 

회원가입 시 백엔드에서 정해놓은 유효성 검사 규칙에 어긋날 경우 백엔드에서 에러 메세지를 보내주고, 나는 그 값에 따라 에러메세지를 alert 창으로 띄웠다. 따로 프론트엔드에서 input창에 입력된 value를 평가해서 에러메세지를 띄우지 않고, 백엔드에서 보내주는 결과에 따라 에러메세지를 띄우면 되니 편했다.

 

        if (result.message === 'KEY_ERROR') {
          setErrorMsg('빈 칸을 채워주세요');
        } else if (result.message === '이메일 양식이 맞지않습니다.') {
          setErrorMsg('이메일 형식에 맞지 않습니다.');
        } else if (result.message === '비밀번호 양식이 맞지않습니다.') {
          setErrorMsg(
            '비밀번호는 8자리 이상, 숫자와 영어, 특수문자를 포함해야 합니다.'
          );
        } else if (pwd !== confirmPwd) {
          setErrorMsg('비밀번호가 일치하지 않습니다.');
        } else if (result.message === 'SIGNUP_SUCCESS') {
          setErrorMsg('');
          alert('회원가입 되었습니다.');
          navigate('/');
        }

 

처음에 작성한 코드는 이렇다. 백엔드에서 정한 result.message 컨벤션이 통일성이 없고, 또 alert로 보내주는 메세지 내용이 길다보니 가독성이 좋지 않았다. 그래서 위에서 응답 메세지와 에러 메세지를 객체로 선언해주고, 그 객체를 활용하여 에러메세지를 보여주는 식으로 코드를 수정했다.

 

  const handleMsg = {
    emptyError: 'KEY_ERROR',
    emptyMsg: '빈 칸을 채워주세요.',
    emailError: '이메일 양식이 맞지않습니다.',
    emailMsg: '이메일 형식에 맞지 않습니다.',
    pwdError: '비밀번호 양식이 맞지않습니다.',
    pwdMsg: '비밀번호는 8자리 이상, 숫자와 영어, 특수문자를 포함해야 합니다.',
    success: 'SIGNUP_SUCCESS',
    successMsg: '회원가입 되었습니다.',
  };

  const {
    emptyError,
    emptyMsg,
    emailError,
    emailMsg,
    pwdError,
    pwdMsg,
    success,
    successMsg,
  } = handleMsg;

 ...생략
      .then((result) => {
        if (result.message === emptyError) {
          setErrorMsg(emptyMsg);
        } else if (result.message === emailError) {
          setErrorMsg(emailMsg);
        } else if (result.message === pwdError) {
          setErrorMsg(pwdMsg);
        } else if (pwd !== confirmPwd) {
          setErrorMsg('비밀번호가 일치하지 않습니다.');
        } else if (result.message === success) {
          setErrorMsg('');
          alert(successMsg);
          navigate('/');
        }
      });

 

그랬더니 코드가 길어지긴 했지만 확실히 깔끔해졌다!

 

 

result.message 외에도 response의 상태코드가 200, 400일 때, 또는 response가 Ok 일 때와 같이 여러 형태로 백엔드와의 통신 결과를 활용할 수 있다. 그러니 사전에 꼭 백엔드와 result 메세지를 어떤 상황에서 보내주는지, 프엔에서 어떤 경우에 안내창을 띄우면 될지 말을 맞추고 코드를 짜야 한다! 또 result 메세지가 변경될 경우 프엔에서도 당연히 조건을 수정해줘야 하니 변경사항이 있으면 꼭 공유해주기!! 잊지 말자^ㅇ^