인프런 커뮤니티 질문&답변
작성한 질문수
useEffect 비동기 관련 질문
해결된 질문
작성
·
41
0
비동기가 되기 때문에 콘솔로그를 쓰면 안된다에대한 질문입니다.
위(setCount 내부)에는 count + value를 했고
아래 콘솔로그는 count로 예시를 보여주셨습니다.
궁금한건
아래 콘솔로그에도 +value를 달면 렌더링 결과는 똑같이 나오는거 아닌가요?
물론 실질적인 값은 동일하지 않더라도 이렇게 되면 렌더링 되는 결과는 같은거 아닌가요?
답변 2
0
안녕하세요 이정환입니다.
console.log(value + count) 과 같이 출력하면 말씀하신대로 콘솔에는 count + value의 값이 출력됩니다. 그러나 이것은 count State의 값이 진정으로 변화된게 아닙니다.
여기서 중요한 것은 "console.log를 사용해서는 안된다"가 아니라, setState는 비동기적으로 동작하기 때문에 "setState 호출 이후에, 함수 내부에서 업데이트가 즉시 반영될 거라고 기대해서는 안된다" 라는 점 입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 최동혁님.
useEffect와 비동기에 관한 질문을 주셨는데요, 관련된 내용을 이해하는 데 도움을 드리고자 합니다.
React에서는 setState가 비동기적으로 동작하기 때문에, 상태 업데이트 직후에 상태의 변경된 값을 콘솔에 출력하면 변경 전의 값이 출력될 수 있습니다. 이때, 상태 값에 변경이 일어난다 하더라도, 그 다음 줄의 콘솔로그에서는 기존의 상태 값을 참조하게 됩니다.
const onClickButton = (incrementValue) => {
const updatedCount = count + incrementValue;
setCount(updatedCount);
console.log(updatedCount);
};
위와 같은 코드에서 updatedCount는 count와 incrementValue의 합이지만, setCount가 마무리되기 전에 console.log(count)를 작성하면 변화 전 count가 출력됩니다. 이를 방지하고 정확히 출력하기 위해 console.log(updatedCount)라고 한다면, 해당 연산 결과(count + incrementValue)를 출력하므로 의도한 대로 값이 보일 것입니다.
즉, console.log에서 +value를 추가하여 console.log(count + value)를 한다면 실제 상태 값이 업데이트되기 전에 콘솔에 계산된 값을 표시하는 것이기 때문에, 렌더링 전에 콘솔에 출력하는 값만 맞춰놓은 것처럼 보일 수 있습니다. 그러나 이는 상태 관리 원칙이나 비동기 개념을 따른 것은 아니기 때문에 적절한 활용이라고 보기는 어렵습니다.
관련하여 더 명확한 예제와 깊이 있는 설명이 필요한 경우 아래 유사한 질문이 도움이 될 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다