potatosam

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

 root.querySelector("#btn").addEventListener("click", () => {
 setCount(count + 1);
 });
}

function render() {
 Counter();
}

render();</code></pre>개념 설명을 위해 단순화하다 보니, 실행 환경의 스코프 문제를 고려하지 못했네요 ㅠㅠ강의 자료도 <code>addEventListener</code> 방식으로 보완하여 업로드하였습니다.(다시 다운로드 부탁드립니다!)좋은 질문 주셔서 감사합니다. :)

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

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

potatosam

Posts