Chapter 4-2 React랜더링과정 설명중 자료가 틀리게 적어져있네요..

Question

Chapter 4-2 React랜더링과정 설명중

강의자료 코드 이미지가 잘못되있어요..
강의자료 (처음부터 ~ 2분까지나오는 내용)
const [value, setValue] = useState(0);
........중간생략
setValue((state) => state +1) 로 되어있는데.. => 틀린부분

onClick 이벤트를 실행할때마다 value값이 1씩 증가하도록
setValue 값을 설정했다고 하는데..

setValue((value) => value +1) 로 되야하는건 아닌가요??

Codingbear · Answer

setValue() 안에 들어가는 화살표함수의 매개변수명은 다른 이름으로 사용해도 됩니다. 따라서 오타는 아닙니다. 좀 더 의미있는 변수명을 사용한다면 해당 변수는 이전 상태값을 의미하므로 다음과 같이 작성하는 것이 더욱 가독성 있는 표현입니다. setValue((prevValue) => prevValue + 1);

김현종 · Answer

이제막 리엑트공부를 시작하는시점에서 궁금한점이 해결됐네요.. 감사합니다...

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김현종님. React에서 상태 업데이트를 하는 코드를 이해하는 데 혼란을 느끼신 것 같습니다. 기본적으로 useState 훅을 사용할 때, 상태를 업데이트하는 함수는 콜백 함수로 전달되어야 최신 상태 값을 기반으로 업데이트를 할 수 있습니다. 설명 React의 상태 업데이트 함수인 setValue 는 이전 상태 값을 인자로 받아 새로운 상태 값을 반환하는 함수를 전달받을 수 있습니다. 이 방식은 상태 업데이트가 비동기적으로 이루어질 때 유용합니다. // 잘못된 코드 (오타가 있는 경우) setValue((state) => state + 1); 위 코드와 아래처럼 수정된 코드는 사실상 동일하게 동작합니다: // 올바른 코드 setValue((value) => value + 1); 여기서 state 대신 value 라는 이름을 사용해도 상관없으며, 변수명은 개발자가 원하는 어떤 것을 사용해도 됩니다. 중요한 점은 이전 상태 값을 받아 돌아오는 새로운 상태 값을 반환하면 된다는 것입니다. 참고하기 좋은 기존 답변 관련 내용을 더 잘 이해하기 위해 유사한 질문과 답변을 확인하시기 바랍니다: - React에서 상태 업데이트 방법 설명 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.