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

2 asked

1

안녕하세요! 질문 주셔서 감사합니다 :)

헷갈릴 수 있는 지점을 짚어주셔서 감사합니다.

먼저 해당 예제는 useState의 내부 아이디어를 가장 단순하게 보여주기 위한 개념 설명용 수도코드에 가까운 예제였습니다.
즉, “상태를 외부에 저장하고, setter가 상태를 바꾼 뒤 다시 render를 호출한다”는 흐름을 보여주는 데 초점을 둔 코드입니다.

다만 말씀해주신 것처럼, 이 코드를 브라우저에서 그대로 실행하면 setCount is not defined 오류가 발생할 수 있습니다.

문제는 이 부분입니다.

return `<button onclick="setCount(${count + 1})">${count}</button>`;

onclick="setCount(...)"는 HTML 문자열 안에 들어간 인라인 이벤트 핸들러입니다.

innerHTML로 DOM에 들어간 뒤 버튼을 클릭하면, 브라우저가 이 문자열을 자바스크립트 코드처럼 실행합니다.

이때 setCount를 Counter 함수 내부의 지역 변수로 찾는 것이 아니라, 전역(window) 스코프에서 찾게 됩니다.

그런데 setCount는 아래처럼 Counter 함수 안에서 만들어진 지역 변수입니다.

function Counter() {
  const [count, setCount] = useState(0);
}

그래서 클릭 시점에 브라우저가 window.setCount를 찾다 못 찾아 setCount is not defined 오류가 발생합니다.

해결 방법은 말씀 주신 것처럼 크게 두 가지입니다.

1. setCount를 바깥 스코프에 선언해서 전역에서 접근 가능하게 만들기

2. 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 = `<button id="btn">${count}</button>`;

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

function render() {
  Counter();
}

render();

개념 설명을 위해 단순화하다 보니, 실행 환경의 스코프 문제를 고려하지 못했네요 ㅠㅠ

강의 자료도 addEventListener 방식으로 보완하여 업로드하였습니다.(다시 다운로드 부탁드립니다!)

좋은 질문 주셔서 감사합니다. :)