useState

 

const React = (() => {
  let state; 
  const useState = (init) => {
    state = state ?? init
     let setState = (newValue) => {
       state = newValue
       return state
     }
    return [state, setState]
  }
  
  return {useState} 
})()


const [state, setState] = React.useState("hi");

setState("no")
state
setState("2222")
state

 

리액트 useState

대강 이렇게 생기지 않았을까

 

 

아쉬운 건 

 

state.name = "eunji"

 

하는 순간 값은 들어가지 않지만 오류 자체를 안 띄워줌

 

이걸 해결하려면

 

 

1. 프록시 객체 사용하기

const React = (() => {
  let state;

  const useState = (init) => {
    state = new Proxy({ ...init }, {
      set(target, prop, value) {
        throw new Error(`'${prop}' 속성을 직접 변경할 수 없습니다. setState를 사용하세요.`);
      },
    });

    const setState = (newValue) => {
      state = new Proxy({ ...state, ...newValue }, {
        set(target, prop, value) {
          throw new Error(`'${prop}' 속성을 직접 변경할 수 없습니다. setState를 사용하세요.`);
        },
      });
      render();
    };

    return [state, setState];
  };

  const render = () => {
    console.log("렌더링!", state);
  };

  return { useState };
})();

const [state, setState] = React.useState({ id: 1 });
 state.id = 123;

setState({ name: "React" });

 

 

 

• 간단한 불변 상태: Object.freeze
• 정교한 감시와 제한: Proxy
• 속성 단위로 제어: Object.defineProperty

 

요렇게 등등 있다고 하는데

Object.defineProperty. object.freeze는 안되는 것 같음