인프런 커뮤니티 질문&답변
작성한 질문수
7.2강의 useEffect에 관한 질문입니다.
해결된 질문
작성
·
93
0
useState대신 useEffect를 사용하는 이유는 이벤트핸들러 동작시 useState는 비동기를 제공하지 않아 setCount가 동작을 마치기 전 console.log가 실행되어 setCount이후 적용되는 count를 console에 찍지 못하고 리렌더링되기 이전의 state만 console에 찍히기 때문에 useState대신 useEffect를 사용한다고 하셔서 혹시나 하고 useEffect대신 useState를 사용하고 대신 이벤트 핸들러에 async await를 적용했더니 useEffect에서 제공하는 기능이 실행되는것을 확인했습니다.
여기서 궁금한점은 useState+async await와 useEffect간의 차이점을 알고싶습니다.
const onClickHandler = async (value) => {
await setCount(count+value)
console.log(count)
}답변 2
0
안녕하세요 이정환입니다.
우선 질문의 "useState는 비동기를 제공하지 않는다" -> 그렇지 않습니다. useState가 반환하는 setState 메서드가 비동기로 동작한다 라고 표현해야 정확합니다 😃
추가로 setState 메서드는 await을 붙여도 동기적으로 동작하지 않습니다. Promise를 반환하는 함수가 아니기 때문입니다(이에 대해서는 본 강의의 비동기처리 파트를 참고하세요)
따라서 위에 작성해주신 코드에서 콘솔에 출력되는 count는 count + value의 값이 아닌 이전의 count 값일 걸로 예상됩니다. 혹시 아니라면 전체 스크린샷을 보내주실 수 있을까요?
0
안녕하세요, 인프런 AI 인턴입니다. 양진영님.
React의 setState를 사용할 때와 useEffect의 차이점을 이해하려는 질문이시군요! 좋은 질문입니다. 두 방법 모두 React의 상태 업데이트와 관련이 있지만, 조금 다른 용도로 사용됩니다. 여기서 차이를 설명드리겠습니다.
1. 상태 업데이트 방식
useState with async/await:
setState는 비동기로 동작합니다. 직접적으로async/await를 사용할 수 없으며,console.log를 호출하면 즉시 “현재의 값”을 출력합니다. 값이 업데이트되기 전 상태를 출력하며,async/await구조에서도 마찬가지입니다.setState는 상태 변경 후 자동으로 컴포넌트를 리렌더링하지 않는 대신, 리렌더링은 상태가 변경될 때 자동으로 이루어집니다.
useEffect:
useEffect는 상태나 props가 변경된 후, 비동기 작업이나 부수 효과를 처리할 때 사용됩니다. 상태가 변동될 때(또는 컴포넌트가 마운트/언마운트 될 때) 특정 작업을 수행하려는 시점에서 더 적절합니다. 즉, 상태가 변경된 후에 무언가를 해야 할 때 유용합니다.
2. 주요 차이점
동작 시점:
useState는 상태를 변경하고, 그 변경된 상태는 다음 렌더링에서 사용할 수 있습니다. 따라서async/await으로setState후 진행될 코드를 제어하려 해도setState자체는 비동기 처리가 아니므로 직접적인 차이는 없습니다.
useEffect는 상태가 변경된 이후에 실행됩니다. 따라서 상태가 변경된 후의 작업(로깅 등)을 포함하는 로직 작성을 할 때 적합합니다.
목적 및 사용 방법:
setState는 상태 변경이 주 목적입니다.
useEffect는 이 변경을 관리하며, 이에 반응하는 부수 효과를 다룰 때 사용합니다.
추가 링크:
이 점들에 유의하면 React 컴포넌트를 더 효율적으로 설계할 수 있을 것입니다. 양진영님의 궁금증 해결에 도움이 되었길 바라며, 추가 질문이 있으시면 언제든지 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.