React useState 흉내내기

JavaScript의 값 복사(pass by value) 개념을 이해하고 있는지 확인합니다.

  • setFoo(1) 호출 후 foo 값이 어떻게 될까요? 그렇지 않다면 어떻게 수정하면 될지 제시해주세요.
function useState(initialValue) {
  var _value = initialValue;
  function setState(newValue) {
    _value = newValue;
  }
  return [_value, setState];
}

const [foo, setFoo] = useState(0);
console.log(foo); // 0
setFoo(1);
console.log(foo); // ?

본격적으로 React useState 뽀시기

단일 _value로 여러 상태를 관리할 때 발생하는 문제를 이해하고 있는지 확인합니다.

  • App.click() 후 render 했을 때 출력값이 어떻게 될까요? 의도대로 동작하지 않는다면 그 이유는?
const DatepopReact = (function () {
  let _value;
  function useState(initialValue) {
    let state = _value || initialValue;
    const setState = (newValue) => { _value = newValue; };
    return [state, setState];
  }
  function render(Component) {
    const C = Component();
    C.render();
    return C;
  }
  return {useState, render};
})();

function DatepopComponent() {
  const [count, setCount] = DatepopReact.useState(0);
  const [text, setText] = DatepopReact.useState("popdeal");
  return {
    render: () => console.log({count, text}),
    click: () => setCount(count + 1),
    type: (v) => setText(v),
  };
}

let App = DatepopReact.render(DatepopComponent); // {count:0, text:"popdeal"}
App.click();
App = DatepopReact.render(DatepopComponent); // ?
App.type("poppass");
App = DatepopReact.render(DatepopComponent); // ?

React useState 제대로 만들어보기

states 배열과 index로 상태를 순서대로 관리합니다. setState를 완성해보세요.

const DatepopReact = (function () {
  let states = [];
  let index = 0;
  function useState(initialValue) {
    const _index = index;
    let state = states[_index] || initialValue;
    const setState = (newValue) => {
      // 코드를 작성해주세요!
    };
    index += 1;
    return [state, setState];
  }
  function render(Component) {
    index = 0;
    const C = Component();
    C.render();
    return C;
  }
  return {useState, render};
})();

React useState 완성하기

함수형 업데이트를 지원하도록 수정합니다.

  • newValue가 함수일 경우, 이전 상태값을 어떻게 넘겨주면 될까요?
const setState = (newValue) => {
  if (typeof newValue === "function") {
    states[_index] = newValue(...); // ?
  } else {
    states[_index] = newValue;
  }
};