useState 직접 구현 부분에서 질문이 있습니다.

안녕하세요! 질문 주셔서 감사합니다 :)헷갈릴 수 있는 지점을 짚어주셔서 감사합니다.먼저 해당 예제는 useState의 내부 아이디어를 가장 단순하게 보여주기 위한 개념 설명용 수도코드에 가까운 예제였습니다. 즉, “상태를 외부에 저장하고, setter가 상태를 바꾼 뒤 다시 render를 호출한다”는 흐름을 보여주는 데 초점을 둔 코드입니다.다만 말씀해주신 것처럼, 이 코드를 브라우저에서 그대로 실행하면 setCount is not defined 오류가 발생할 수 있습니다.문제는 이 부분입니다. return `${count}`;onclick="setCount(...)"는 HTML 문자열 안에 들어간 인라인 이벤트 핸들러입니다.innerHTML로 DOM에 들어간 뒤 버튼을 클릭하면, 브라우저가 이 문자열을 자바스크립트 코드처럼 실행합니다.이때 setCount를 Counter 함수 내부의 지역 변수로 찾는 것이 아니라, 전역(window) 스코프에서 찾게 됩니다.그런데 setCount는 아래처럼 Counter 함수 안에서 만들어진 지역 변수입니다.function Counter() { const [count, setCount] = useState(0); }그래서 클릭 시점에 브라우저가 window.setCount를 찾다 못 찾아 setCount is not defined 오류가 발생합니다.해결 방법은 말씀 주신 것처럼 크게 두 가지입니다.setCount를 바깥 스코프에 선언해서 전역에서 접근 가능하게 만들기addEventListener로 이벤트 핸들러를 직접 연결하기인라인 문자열 핸들러의 전역 스코프 문제를 피할 수 있고, 이벤트 콜백이 setCount를 클로저로 기억하기 때문에 addEventListener방식을 이용하는게 더 자연스러워 보입니다. ㅎㅎ예를 들면 다음처럼 바꿀 수 있습니다.// 전역 변수로 상태 저장 시도 let _state; function useState(initialValue) { if (_state === undefined) { _state = initialValue; } const setState = (newValue) => { _state = newValue; render(); }; return [_state, setState]; } function Counter() { const [count, setCount] = useState(0); const root = document.querySelector("#root"); root.innerHTML = `${count}`; root.querySelector("#btn").addEventListener("click", () => { setCount(count + 1); }); } function render() { Counter(); } render();개념 설명을 위해 단순화하다 보니, 실행 환경의 스코프 문제를 고려하지 못했네요 ㅠㅠ강의 자료도 addEventListener 방식으로 보완하여 업로드하였습니다.(다시 다운로드 부탁드립니다!)좋은 질문 주셔서 감사합니다. :)

학습을 하고 블로그에 정리를 해도 괜찮을까요?

안녕하세요! 강의를 수강해주셔서 감사합니다 :)강의 내용이나 코드를 그대로 복사/붙여넣기 하는 것이 아닌, 수강생님이 직접 이해하신 내용을 바탕으로 요약해서 작성해 주시면 감사하겠습니다. 작성하실 때 강의 출처(강의명과 링크)도 함께 남겨주시면 더욱 감사하겠습니다 😊