useState 훅

Question

const [count,setCount] = useState(0); 선언되어 있을때 ()=>setCount(count+1); (count)=>setCount(count +1); 강의에서는 2번 처럼 사용 하던데 1번 처럼 사용해도 상관없나요? 차이가 있나요?

수코딩 · Answer

안녕하세요! 이번 질문에 대한 답변은 인프런 AI 인턴의 답변을 참고하시면 됩니다. 인턴이 정확하게 답변했네요 🙂 (머쓱..) 감사합니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 신박한님. useState 를 사용할 때, 상태 업데이트에 있어서 두 가지 방식에 대해 궁금하신 것 같습니다. 두 방식 모두 상태를 업데이트하는 방법이지만, 약간의 차이가 있습니다. 차이점 정리: 1번 방식 : ()=>setCount(count+1); 이 방식은 기존의 count 값을 그대로 사용하여 그에 1을 더합니다. 하지만, 이 방식은 비동기적인 특성을 가진 리액트 상태 관리에서 문제를 일으킬 수 있습니다. 만약 업데이트가 연속으로 이루어질 경우(예: 빠르게 버튼을 두 번 클릭), 예상치 않은 결과를 초래할 수 있습니다. 이는 count 값이 업데이트로 인해 즉각적이지 않을 수 있기 때문입니다. 2번 방식 : (prev) => setCount(prev + 1); 이 방식은 함수형 업데이트를 사용하는 방법입니다. prev 는 setCount 가 호출될 당시의 최신 count 값을 캡처합니다. 비동기적인 상태 업데이트에도 안정적이며, 동시에 여러 업데이트가 이루어질 때에도 정확한 결과를 보장합니다. 결론 리액트에서는 비동기적인 업데이트의 특성을 고려하여 2번 방식인 함수형 업데이트를 사용하는 것이 더 안전하고 권장됩니다. 따라서 강의에서도 이러한 방식으로 설명했을 가능성이 큽니다. 이와 관련해서 더 깊이 이해할 수 있는 유사한 질문들을 추천해 드립니다: 리액트에서 상태 업데이트 시 함수형 업데이트의 장점과 사용법 리액트의 비동기 업데이트 처리 방법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.