DIL: 모던 리액트 딥 다이브, 2주차-1

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week2-1_2024-03-11

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 2주차 | 3, 5장 | 리액트 훅과 상태관리 라이브러리 | 189~194p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 10시반~12시

---

React Hook 파헤치기

useState

const [state, setState] = useState(initialState); // initial state이 없다면 초기값은 undefined

• 함수 컴포넌트 내부에서 상태를 정의, 상태를 관리할 수 있게 해주는 훅
• 매번 렌더링이 발생될 때마다, 함수는 새롭게 실행되고, 새롭게 실행되는 함수의 값이 초기화된다.
  • 이를 해결하기 위해 closure 사용
  • 실제 리액트 코드에서는 useReducer를 이용
    • 훅의 구현체 타고 올라가면? __SECRET_INTERNAL_DO_NOT_USE_OR_YOU_WILL_FIRED

=> MyReact의 useState이 반환하는 setState 내에서 랜더링 구현해보려 했는데 실패

• Uncaught RangeError: Maximum call stack size exceeded
  • MyReact.global 객체에서 index를 관리해서 해결할 수 있을 것으로 보이는데 점점 목적에서 벗어나는 것 같아서 중지 -> 학습 진도 다 나간담에 심심하면 재도전

import React from "react";

export default function MyUseState() {
  return MyReact;
}

const MyReact = (() => {
  interface Global {
    states: any[];
  }

  const global: Global = {
    states: [],
  };

  let index = 0;

  type SetStateFunction = (value: any) => void;

  function useState(initState?: any): [any, SetStateFunction] {
    const currentIndex = index;

    if (typeof global.states[currentIndex] === "undefined") {
      global.states[currentIndex] =
        typeof initState !== "undefined" ? initState : null;
    }

    const currentState = global.states[currentIndex];

    const setState: SetStateFunction = (value) => {
      global.states[currentIndex] = value;
      forceUpdate();
    };

    index = index + 1;

    return [currentState, setState];
  }

  const [value, setValue] = useState(0);

  let render: React.FC<{ value: any }> = ({ value }) => (
    <section>
      <aside>
        <label>My UseState Hook</label>
        <div>{value}</div>
        <button onClick={() => setValue(value + 1)}>+</button>
      </aside>
    </section>
  );

  const forceUpdate = () => {
    render = (newValue) => render({ value: newValue });
    return render(value);
  };

  return render(value);
})();