-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
useEffect에서 변수 업데이트 관련 질문
23.12.30 22:23 작성 조회수 145
0
안녕하세요.
본 강의에서 보여주신 회원가입 버튼 비활성화 로직은 다음과 같습니다.
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가 업데이트 되는 타이밍 문제도 고려해 보았지만, 그렇다면 본래의 코드에서도 이런 문제가 발생하여야 할 것이라고 판단했습니다.
여러모로 분석해 보았지만 이유를 알기가 어렵습니다.
답변을 작성해보세요.
0
이진석
지식공유자2023.12.31
안녕하세요
보여주신 코드에서 setFormDisabled(true) 를 호출하는 코드가 없는 듯 보입니다. 그래서 비활성화가 안 되는 것은 아닐까요?
코해
질문자2024.01.01
const [formDisabled, setFormDisabled] = useState(true);네... 말씀하신 부분은, 위와 같이 기본값이 true 이므로 input에 입력된 값을 지우면 다음에 의해
const [inputs, setInputs] = useState({ username: "", password: "" });Signup 컴포넌트가 다시 렌더링 되면서 formDisabled 가 true로 다시 설정되는 것으로 이해하고 있습니다.
그런데 이렇게 동작을 안하는 것 같아서 질문드렸습니다.
이진석
지식공유자2024.01.01
제가 질문을 명확히 이해하지 못했습니다. 재질문 주신 내용이 초기값으로 상탯값이 다시 초기화되지 않느냐라는 질문인지요?
useState(인자) 에 지정한 인자는 컴포넌트가 처음 렌더링될 때에 단 1회만 상탯값의 초기값으로 활용됩니다. 그 이후에는 재렌더링이 되더라도 상탯값은 초기값으로 초기화되지 않습니다.
formDisabled 상탯값을 변경하는 곳은 아래 코드 밖에 없는 데, setFormDisabled(true); 로 설정하는 코드가 없으니 해당 상탯값이 true 로 다시 변경되지 않은 상황입니다. else 와 setFormDisabled(true); 를 추가하는 것이 맞는 상황으로 보여집니다.
코해
질문자2024.01.01
useState의 초기값이 렌더링 될 때마다 다시 읽히는 것으로 잘못 알고 있었습니다. 말씀해주신 내용 참고하여 다음과 같이 수정하였더니 제대로 동작하였습니다.
useEffect(() => {
if (inputs.username && inputs.password) {
setFormDisabled(false);
} else {
setFormDisabled(true);
}
}, [inputs]);감사합니다. 덕분에 답답함이 해소되었습니다.
답변 1