2023-12-30T23:20:09.743Z

0

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

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

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

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

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

1

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

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

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

1

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

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

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