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

안녕하세요 xiwnwls5034님! 좋은 질문 감사합니다 😊

말씀하신 부분, 다시 확인해보니 저도 예전에 잘못 이해하고 있었던 부분이네요. 질문 주셔서 저도 다시 리서치해보게 되었습니다.

useState에서 사용하는 setState 함수는 비동기적으로 작동하긴 하지만, 이게 Promise를 반환하는 함수는 아닙니다.

즉, await setState(...)를 해도 실제로 state가 업데이트될 때까지 기다려주지 않아요. await을 써도 의미 없는 코드가 됩니다.

그리고 중요한 포인트는, state는 setState 호출 직후에 바로 바뀌는 게 아니라, 리렌더링이 일어난 다음에야 반영된다는 점입니다.

React가 내부적으로 상태 변경을 큐에 넣고, 다음 렌더링 주기에 상태를 업데이트하기 때문에, console.log 같은 걸 바로 아래에 써도 이전 값이 출력됩니다.

예시 코드

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // 항상 이전 값 출력됨
};

만약 상태 변경 이후의 값을 확인하고 싶다면, useEffect를 사용해서 리렌더링 후 값을 처리해야 합니다:

useEffect(() => {
  console.log("count changed:", count);
}, [count]);

또는, 상태 업데이트 함수 안에서 처리하는 방법도 있습니다:

setCount(prev => {
  const updated = prev + 1;
  console.log("updated:", updated); // 이건 새 값
  return updated;
});

예전에 제가 await을 붙였던 건 setState 동작방식을 정확히 모르는 상태에서 Promise 구현체이기에 await을 매번 붙여줬었는데, 결론적으로 불필요해보입니다. await는 제거하는게 더 좋을 것 같습니다.

정확한 지적 감사드립니다 🙇‍♂

해당 부분은 강의 코드에도 반영해두겠습니다!

더 궁금하신 점 있으시면 언제든 편하게 질문 주세요 :)

안녕하세요, 인프런 AI 인턴입니다.

xiwnwls5034님께서 질문하신 내용은 await 키워드가 실제 비동기 작업에 필수적이지 않을 때도 사용되는 경우에 관한 것입니다. 이 경우에는 코드를 읽는 사람에게 비동기적인 작업을 암시하기 위해 또는 코드 스타일 측면에서 await를 사용하기도 합니다. 또한 코드의 일관성 측면에서 async/await 패턴을 선호하는 개발자들이 있기 때문에 실제 효과가 없더라도 붙여놓는 경우가 있습니다.

그러나 await를 불필요하게 사용하면 코드 효율성 면에서는 최적화가 안 될 수 있으므로, 작성하신 코드 내에서는 await를 제거해도 동일한 기능을 수행한다면 제거해도 무관합니다. 하지만 특정 업무 환경이나 팀내 코딩 스타일에 따라 다르게 처리할 수도 있습니다.

이와 관련하여 참고할 수 있는 자료는 다음과 같습니다.
유사한 강좌에서 비슷한 상황에 대한 논의가 있을 수 있으니 아래의 링크도 확인해 보세요:

• Todo List의 비동기 처리 섹션을 검토해 보세요. 이 강좌는 비동기 작업에서의 효과적인 패턴에 대해 다룹니다.
  

질문자님의 상황에 따라 코드 스타일을 조정하시면 좋을 것 같습니다. 추가로 궁금한 점이 있다면 슬랙 채널을 통해 지식공유자에게 직접 문의하는 것도 좋은 방법일 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.