Closure로 useEffect hook 구현

Closure로 useEffect hook 구현

const React = (function() { // 변경 let hooks = []; let idx = 0; function useState(initVal) { // 변경 const _idx = idx; const state = hooks[idx] || initVal; const setState = newVal => { // 변경 hooks[_idx] = newVal; }; idx++; return [state, setState]; } function render(Component) { idx = 0; const C = Component(); C.render(); return C; } return { useState, render }; })(); function Component() { const [count, setCount] = React.useState(1); const [text, setText] = React.useState('apple'); return { render: () => console.log({ count, text }), click: () => setCount(count + 1), type: (word) => setText(word), } } var App = React.render(Component); // {count: 1, text: "apple") App.click(); var App = React.render(Component); // {count: 2, text: "apple"} App.type('pear'); var App = React.render(Component); // {count: 2, text: "pear"}

React Hooks 규칙 중에 hooks를 최상위에서만 호출하고 반복문 또는 조건문안에서 호출하지 말라는 규칙

-> Render될때마다 특정 index에 state가 순서대로 할당되므로 최상위에서 불러야 하는 것

from http://kiberd.tistory.com/53 by ccl(A) rewrite - 2021-12-27 18:26:49