useEffect에서 변수 업데이트 관련 질문

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

리액트 기본 기능으로 회원가입 폼 만들기

해결된 질문

작성

238

안녕하세요.

본 강의에서 보여주신 회원가입 버튼 비활성화 로직은 다음과 같습니다.

  useEffect(() => {
    const isEnabled = Object.values(inputs).every((s) => s.length > 0);
    setFormDisabled(!isEnabled);
  }, [inputs]);

위의 코드로 실행하면 username과 password를 모두 입력하면 회원가입 버튼이 활성화되고 하나라도 지우면 다시 비활성화 됩니다.

  useEffect(() => {
    if (inputs.username && inputs.password) {
      setFormDisabled(false);
    }
  }, [inputs]);

그러나 조금 수정하여(이외의 부분은 모두 동일) 위와 같이 실행해보면, 본래의 코드와 마찬가지로 모두 입력되었을 때 버튼이 활성화 되지만 다시 지워도 비활성화가 되지 않습니다. 두 곳 모두 지워봐도 마찬가지입니다. console.log로 찍어보아도 false 값으로 고정된 채 바뀌지 않습니다.

useEffect가 비동기 방식이므로 formDisabled가 업데이트 되는 타이밍 문제도 고려해 보았지만, 그렇다면 본래의 코드에서도 이런 문제가 발생하여야 할 것이라고 판단했습니다.

여러모로 분석해 보았지만 이유를 알기가 어렵습니다.

react useEffect 비동기

답변 1

이진석

지식공유자

안녕하세요

보여주신 코드에서 setFormDisabled(true) 를 호출하는 코드가 없는 듯 보입니다. 그래서 비활성화가 안 되는 것은 아닐까요?

코해

질문자

const [formDisabled, setFormDisabled] = useState(true);

네... 말씀하신 부분은, 위와 같이 기본값이 true 이므로 input에 입력된 값을 지우면 다음에 의해

const [inputs, setInputs] = useState({ username: "", password: "" });

Signup 컴포넌트가 다시 렌더링 되면서 formDisabled 가 true로 다시 설정되는 것으로 이해하고 있습니다.

그런데 이렇게 동작을 안하는 것 같아서 질문드렸습니다.

이진석

지식공유자

제가 질문을 명확히 이해하지 못했습니다. 재질문 주신 내용이 초기값으로 상탯값이 다시 초기화되지 않느냐라는 질문인지요?

useState(인자) 에 지정한 인자는 컴포넌트가 처음 렌더링될 때에 단 1회만 상탯값의 초기값으로 활용됩니다. 그 이후에는 재렌더링이 되더라도 상탯값은 초기값으로 초기화되지 않습니다.

formDisabled 상탯값을 변경하는 곳은 아래 코드 밖에 없는 데, setFormDisabled(true); 로 설정하는 코드가 없으니 해당 상탯값이 true 로 다시 변경되지 않은 상황입니다. else 와 setFormDisabled(true); 를 추가하는 것이 맞는 상황으로 보여집니다.

코해

질문자

useState의 초기값이 렌더링 될 때마다 다시 읽히는 것으로 잘못 알고 있었습니다. 말씀해주신 내용 참고하여 다음과 같이 수정하였더니 제대로 동작하였습니다.

useEffect(() => {
  
    if (inputs.username && inputs.password) {
      setFormDisabled(false);
    } else {
      setFormDisabled(true);
    }
  }, [inputs]);

감사합니다. 덕분에 답답함이 해소되었습니다.

인프런 커뮤니티 질문&답변

useEffect에서 변수 업데이트 관련 질문