[React] 클로저로 useState 구현하기

클로저로 useState 구현하기

클래스형 컴포넌트와 함수형 컴포넌트 비교

항목	클래스형 컴포넌트	함수형 컴포넌트
리렌더	렌더 메소드로 필요한 부분만 업데이트	props를 인자로 받아 리액트 컴포넌트를 리턴

• 즉, 함수형 컴포넌트에서는 렌더링이 함수호출을 통해 이루어진다.
• 리렌더링이 될때, 컴포넌트는 상태를 기억하고 있을 필요가 있다.
• Hook은 이를 클로저를 통해 구현한다.
• 현재 컴포넌트가 다시 만들어져도 상태값은 Hook이 관리하기 때문에 초기화되지 않는다.

useState 구현하기

Basic한 버전

// 즉시실행함수
const React = (function () {
  let value; // 선언(private value)
  const useState = (initValue) => {
    const state = () => value || initValue;
    const setState = (newValue) => {
      value = newValue;
      console.log("set: " + value);
    };
    return [state, setState];
  };
  return { useState };
})();

export default React;

• 즉시실행함수로 React를 생성
• 내부에 useState함수를 선언
• 작동은 하지만 여러개를 관리할 수 없음

업그레이드 버전

• 상태와 세터를 컴포넌트 바깥에서 배열로 관리
  • setters: []
  • states: []
  • cursor: 0
• 첫번째 렌더시에는 해당 states, setter를 각각 배열에 추가시키는 작업이 필요함
  • 현재가 첫번째 렌더인지 알 방법이 필요함
  • 렌더할때마다 render id를 증가시키면 됨
  • render id: -1
  • 각 컴포넌트 렌더시에 ++하고 렌더시작