๐react-tada for state management in React
MIT License
npm i react-tada
Tada is a hook. Without needing a complicated explanation, you can easily create a Tada. Tada๋ hook์ ๋๋ค. ๋ณต์กํ ์ค๋ช ํ์ ์์ด ๊ฐ๋จํ๊ฒ Tada๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
// jsx
import { tada } from 'react-tada;
const useCountTada = tada({ count: 0 });
// tsx
import { tada } from 'react-tada';
type State {
count: number;
}
export const useCountTada = tada<State>({ count: 0 });
You can update the state as simply as setState
in useState
without needing to create or select a separate set function.
However, the state should be updated immutably.
๋ณ๋์ set ํจ์๋ฅผ ์์ฑํ๊ณ ์ ํํ์ง ์์๋ useState
์ setState
์ฒ๋ผ ๊ฐ๋จํ๊ฒ ์ํ๋ฅผ ์
๋ฐ์ดํธํ ์ ์์ต๋๋ค.
๋จ, ์ํ๋ ๋ถ๋ณ์ผ๋ก ์
๋ฐ์ดํธ๋์ด์ผ ํฉ๋๋ค.
const useCount = useCountTada.useTada;
function Counter() {
const [count, setCount] = useCount((state) => state.count);
const inc = () => {
setCount((prev) => ({
...prev,
count: prev.count + 1,
}));
};
return (
<>
<h2>{count}</h2>
<button onClick={inc}>+</button>
</>
);
}
You can also use a Provider. The Component within the CountProvider will share separate, distinct count values! Provider๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. CountProvider ์ปดํฌ๋ํธ ๋ด์ Component ์ปดํฌ๋ํธ๋ ๋ถ๋ฆฌ๋, ์๋ก ๋ค๋ฅธ count ๊ฐ์ ๊ณต์ ํฉ๋๋ค!
const CountProvider = useCountTada.TadaProvider;
const App = () => (
<>
<CountProvider>
<Component /> // initial value
<CountProvider initialState={{ count: 10 }}>
<Component /> // count: 10
<CountProvider initialState={{ count: 20 }}>
<Component /> // count: 20
</CountProvider>
</CountProvider>
</CountProvider>
</>
);
In this way, you can separate states even in the sub-tree. ์ด์ฒ๋ผ ํ์ ํธ๋ฆฌ์์๋ ์ํ๋ฅผ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค.
First, create the useCountTada hook using the Tada constructor interface. ๋จผ์ , tada ์์ฑ์ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ์ฌ useCountTada ํ ์ ์์ฑํฉ๋๋ค.
> tada.ts
import { tada } from 'react-tada';
interface CountState {
count: number;
}
export const useCountTada = tada<CountState>({ count: 0 });
Generate the count state and setCount to update the state. Additionally, add renderCount to check the number of times the component is rendered. count ์ํ์ ์ํ๋ฅผ ์ ๋ฐ์ดํธ ํ setCount๋ฅผ ์์ฑํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ ํ์๋ฅผ ์ฒดํฌํ๊ธฐ ์ํด renderCount๋ฅผ ์ถ๊ฐํฉ๋๋ค.
> Counter.tsx
const useCount = useCountTada.useTada;
const Counter = () => {
const [count, setCount] = useCount((state) => state.count);
const renderCount = useRef(1);
useEffect(() => {
renderCount.current += 1;
});
return (
<>
<div>
<h2>Counter Component : {count}</h2>
<button
onClick={() => {
setCount((prev) => ({ ...prev, count: prev.count + 1 }));
}}
>
+
</button>
<p>Render Count : {renderCount.current}</p>
</div>
</>
);
};
export default Counter;
Finally, create the TadaProvider using the useCountTada hook, then generate the sub-tree structures where you want to separate the state. ๋ง์ง๋ง์ผ๋ก useCountTada ํ ์ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ๊ฒ TadaProvider๋ฅผ ์์ฑํ ๋ค, ์ํ๋ฅผ ๋ถ๋ฆฌํ๊ณ ์ถ์ ํ์ ํธ๋ฆฌ ๊ตฌ์กฐ๋ค์ ์์ฑํฉ๋๋ค.
> CounterPage.tsx
const CountProvider = useCountTada.TadaProvider;
const CounterPage = () => {
return (
<>
<Counter /> // count : 0
<Counter /> // count : 0
<CountProvider initialState={{ count: 10 }}>
<Counter /> // count : 10
<Counter /> // count : 10
<CountProvider initialState={{ count: 20 }}>
<Counter /> // count : 20
</CountProvider>
</CountProvider>
</>
);
};
export default CounterPage;
By using TadaProvider in this way, you can separate states and prevent specific tree state changes from affecting rendering and other impacts. ์ด์ฒ๋ผ TadaProvider๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๋ฅผ ๋ถ๋ฆฌํ ์ ์์ผ๋ฉฐ, ํน์ ํธ๋ฆฌ ์ํ ๋ณ๊ฒฝ์ด ๋ฆฌ๋ ๋๋ง๊ณผ ๊ฐ์ ์ํฅ์ ๋ฏธ์น์ง ์๊ฒ ํ ์ ์์ต๋๋ค.