JavaScript로 useState 구현하기

useState란?

useState는 초기 상태 값을 인자로 받아, 현재 상태 값을 반환하는 함수와 상태를 업데이트하는 함수를 배열로 반환합니다.

구현 코드

const useState = (initValue) => {
  let state = initValue; // 클로저에 의해 메모리에 보존됨

  return [
    function getState() {
      return state; // state 값 반환
    },
    function setState(newValue) {
      state = newValue; // state 업데이트
      render(); // 화면 다시 렌더링
    },
  ];
};

사용 예제

// useState 호출
const [count, setCount] = useState(0);

// 이벤트 리스너 등록
btn.addEventListener("click", () => setCount(count() + 1));

// 렌더링 함수
const render = () => {
  num.innerHTML = count();
};

render(); // 초기 렌더링

클로저의 핵심 역할

1. 외부에서 state 접근 불가

console.log(state); // ReferenceError: state is not defined

state 변수는 useState 함수 내부에서만 존재하므로 외부에서 직접 접근할 수 없습니다.

2. 내부 함수를 통한 접근 가능

count(); // 0 반환 (클로저로 state 접근)
setCount(5); // state를 5로 변경
count(); // 5 반환

3. 클로저가 state를 메모리에 보존

• 반환된 함수가 state를 참조하고 있기 때문에 useState 함수 실행이 끝나도 state는 메모리에서 사라지지 않는다