[ReactJS] setState의 비동기 처리로 인한 버그 해결하기

🚨 문제 상황

setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에 나의 의도대로 코드가 동작하지 않는다.

function handleBtnActivateById(event) {
  setIdValue(event.target.value);
  
  console.log(idValue);
  isIdVaild = idValue.indexOf('@') !== -1 ? true : false;
  handleBtnActivate(event);
}

위의 사진처럼, 입력창에 입력된 값이 (콘솔창에서) 한 글자씩 덜 출력되는 것을 확인할 수 있다. 

 

---

💡 문제 해결 및 과정

구글링의 통해 알아보니, setState의 Batch Update라는 비동기적 특성으로 인해 이런 문제가 생기는 것임을 알 수 있었다.

 

React는 setState가 연속으로 호출된다면 Batch Update를 통헤 이를 한 번에 렌더링한다. 즉, useState는 동기적이 아닌 비동기적으로 작동하는 것이다. 이렇게 동작하는 이유는, 불필요한 랜더링을 방지하여 성능을 향상하기 위함도 있고, 만일 useState가 동기적으로 동작 시 디버깅에 큰 어려움이 야기될 수 있기 때문이다.

 

이러한 특성으로 인해 생긴 이번 문제는, 찾아보니 대략 두 가지의 해결 방법이 소개되었는데

• 하나는 setState에 인자로, 업데이트 할 값이 아닌 콜백 함수를 주는 방법이었고
• 다른 하나는 useEffect를 이용하는 방법이었다.

useEffect는 아직 학습하지 않은 내용이기에, 우선 setState에 콜백 함수를 인자로 주는 방법을 우선 시도해보았다.

let isIdVaild = false;
let isPwVaild = false;
let isAllVaild = false;

export default function Login() {
  const navigate = useNavigate();
  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');

  function handleBtnActivate() {
    if (isIdVaild && isPwVaild) {
      isAllVaild = true;
    } else {
      isAllVaild = false;
    }
  }

  function handleBtnClick() {
    if (isAllVaild) {
      navigate('/leesangyoon/main');
    }
  }

  function handleBtnActivateById(event) {
    setIdValue(idValue => {
      idValue = event.target.value;
      return idValue;
    }); // 수정 부분
    isIdVaild = idValue.indexOf('@') !== -1 ? true : false;
    handleBtnActivate();
  }

  function handleBtnActivateByPw(event) {
    setPwValue(pwValue => {
      pwValue = event.target.value;
      return pwValue;
    }); // 수정 부분
    isPwVaild = pwValue.length >= 5 ? true : false;
    handleBtnActivate();
  }
  
  return (
    <div className="container">
      <div className="first-box">
        <header className="first-box__title">westagram</header>
        <section className="first-box__login-form">
          <input
            id="input-id"
            className="first-box__login-form__input"
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onInput={event => handleBtnActivateById(event)}
          />
          <input
            id="input-pw"
            className="first-box__login-form__input"
            type="text"
            placeholder="비밀번호"
            onInput={event => handleBtnActivateByPw(event)}
          />
          <button
            className={`first-box__login-form__btn ${
              isAllVaild ? '' : 'opacity'
            }`}
            onClick={() => handleBtnClick()}
          >
            로그인
          </button>
        </section>
        <footer className="first-box__forget-pw">
          <a href="#">비밀번호를 잊으셨나요?</a>
        </footer>
      </div>
      
      			...
      
     </div>
  )

 

하지만 여전히 입력창에 입력된 값이 (콘솔창에서) 한 글자씩 덜 출력되는 현상이 사라지지 않았다.

그래서 useEffect를 학습하고 난 후 해당 문제를 해결하였다.

 

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Login.scss';

export default function Login() {
  const navigate = useNavigate();
  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');
  const [isAllVaild, setIsAllValid] = useState(false);

  useEffect(() => {
    if (idValue.indexOf('@') !== -1 && pwValue.length >= 5) {
      setIsAllValid(true);
    } else {
      setIsAllValid(false);
    }
  }, [idValue, pwValue]);

  function handleBtnClick() {
    if (isAllVaild) {
      navigate('/leesangyoon/main');
    }
  }

  function handleBtnActivateById(event) {
    setIdValue(idValue => {
      idValue = event.target.value;
      return idValue;
    });
  }

  function handleBtnActivateByPw(event) {
    setPwValue(pwValue => {
      pwValue = event.target.value;
      return pwValue;
    });
  }

  return (
    <div className="container">
      <div className="first-box">
        <header className="first-box__title">westagram</header>
        <section className="first-box__login-form">
          <input
            id="input-id"
            className="first-box__login-form__input"
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onInput={event => handleBtnActivateById(event)}
          />
          <input
            id="input-pw"
            className="first-box__login-form__input"
            type="text"
            placeholder="비밀번호"
            onInput={event => handleBtnActivateByPw(event)}
          />
          <button
            className={`first-box__login-form__btn ${
              isAllVaild ? '' : 'opacity'
            }`}
            onClick={() => handleBtnClick()}
          >
            로그인
          </button>
        </section>
        <footer className="first-box__forget-pw">
          <a href="#">비밀번호를 잊으셨나요?</a>
        </footer>
      </div>

		...
      
    </div>
  );
}

 

useEffect의 의존성 배열 내부에 작성한 변수값이 변할 때마다 useEffect의 첫 번째 인자인 콜백 함수가 실행된다. 따라서 상태값을 의존성 배열에 넣고, 그 값을 이용한 특정 로직을 콜백 함수에 작성하면, 상태값이 바뀌고 난 이후에 그 로직이 수행되므로 자신의 의도대로 코드를 동작시킬 수 있다. (차후 useEffect에 대해 더 깊은 학습을 진행하고 나서 이 문제를 다시 살펴보도록 하자)

 

---

💬 느낀 점

setState의 비동기적 특성으로 인해 생기는 버그는 나 이외에도 React를 쓰는 많은 프론트엔드 개발자 분들이 한 번쯤 접해봤을 문제란 생각이 든다. 실제로 내가 이 문제를 마주한 이후 부트캠프에서 같이 공부하는 동기 분들 여럿이 같은 문제로 저에게 질문을 해주셨다. 그 때마다 도와드리면서, 저번에 이 문제를 제대로 해결하지 않고 대충 넘어갔던 내 행동에 대한 후회가 많이 들었다. (비록 시간이 부족해서.. 라는 핑계가 있긴 하지만..)

앞으로는 모르는 문제가 생겼을 때 이를 꼭 제대로 해결하고, 문제의 원인과 해결과정을 제대로 알고 가도록 해야겠다.