๐Ÿ’ป ์‚ฌ๋‚ด ์Šคํ„ฐ๋”” ๊ธฐ๋ก | ๋ฆฌ์•กํŠธ ์ƒํƒœ๊ด€๋ฆฌ Recoil๋ฅผ ๋„์ž…ํ•ด๋ดค๋‹ค.

leememberยท2022๋…„ 9์›” 29์ผ
0

์ง€๋‚œ 8์›”, ์‚ฌ๋‚ด ์Šคํ„ฐ๋””๋กœ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด๋ณด์•˜๋‹ค. ์–ด๋–ค ํ”„๋กœ์ ํŠธ๋ฅผ ํ–ˆ๋Š”์ง€๋Š” ์‚ฌ๋‚ด์—์„œ ํ•œ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ผ ์™ธ๋ถ€์ ์œผ๋กœ ๊ณต๊ฐœํ•˜๊ธฐ๊ฐ€ ์กฐ์‹ฌ์Šค๋Ÿฝ๋‹ค. (์กฐ๋งŒ๊ฐ„ ์ด๋ ฅ์„œ ๋…ธ์…˜์—๋‹ค๊ฐ€ ์ •๋ฆฌํ•ด์•ผ์ง€.. ํ‚ฌํ‚ฌ)
๐Ÿ‘‰ ์ด ๊ธ€์€ ์ด๋ฒˆ ์‚ฌ๋‚ด ์Šคํ„ฐ๋””๋กœ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ ํ•ด๋ดค๋˜ ๊ธฐ์ˆ ์Šคํƒ์— ๋Œ€ํ•œ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด๋Š” ๊ธ€์ด๋‹ค.

๐ŸŽƒ ํˆฌ์ž… ์ธ์›

FE ๊ฐœ๋ฐœ์ž๋Š” ๋‚˜ ํ˜ผ์ž.
๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” 2๋ช…. ํ•œ ๋ถ„์€ api ์ž‘์—…์„ ๋งก์œผ์…จ๊ณ  ํ•œ ๋ถ„์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๋Š” batch ์—ญํ• ์„ ๋งก์œผ์…จ๋‹ค.

๐ŸŽƒ ์Šคํ„ฐ๋”” ๋ชฉํ‘œ

์ด๋ฒˆ ์Šคํ„ฐ๋””์˜ ๋ชฉํ‘œ๋Š” ๋ฐฑ์—”๋“œ ๋ถ„๊ณผ ์›ํ™œํ•œ ์†Œํ†ต์„ ํ•˜๋ฉด์„œ ๋ฐฑ์—”๋“œ์˜ ์ง€์‹๋“ค์„ ์กฐ๊ธˆ์ด๋‚˜๋งˆ ์„ญ๋ ตํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. ๋”๋ถˆ์–ด ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์Šคํƒ(Recoil)์„ ๋„์ž…ํ•ด๋ณด๋ฉด์„œ ์–ด๋–ค ๋งค๋ ฅ์ด ์žˆ๊ธธ๋ž˜ ํ•ซํ•œ ๊ธฐ์—…๋“ค์ด ๋งŽ์ด๋“ค ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ธ์ง€ ๊ถ๊ตผํ•ด์„œ ๊ผญ ์จ๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐฑ์—”๋“œ ๋ถ„๋“ค๊ณผ ๊ฐ™์ด ์ž‘์—…ํ•˜๋ฉด์„œ batch๊ฐ€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•œ ๊ฐœ๋…๋„ ์•Œ๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ gateway๋ผ๋Š” ๊ฐœ๋…๋„ ์•Œ๊ฒŒ ๋๋‹ค. ๋˜ํ•œ ์ด๋ฒˆ ์Šคํ„ฐ๋””๋ฅผ ํ†ตํ•ด Poling (ํด๋ง) ์ž‘์—…๋„ ํ•ด๋ดค๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋ก  ์ •๋ง ์žฌ๋ฐŒ์—ˆ๊ณ  ์ƒˆ๋กญ๊ฒŒ ์•Œ์•„๊ฐ€๋Š” ๊ฒƒ๋“ค์ด ๋งŽ์•„์„œ ๊ฐ’์ง„ ์‹œ๊ฐ„์ด์—ˆ๋‹ค.

๐ŸŽƒ Recoil์„ ๋„์ž…ํ•˜๊ธฐ๊นŒ์ง€

์•„๋ฌด๋ž˜๋„ FE ๊ฐœ๋ฐœ์ž๊ฐ€ ๋‚˜ ํ˜ผ์ž์ด๋‹ค๋ณด๋‹ˆ ์„ ํƒ๊ถŒ์ด ์ž์œ ๋กœ์› ๋‹ค. ๊ทธ๋ž˜์„œ ์š”์ฆ˜ ์—ฌ๋Ÿฌ ๊ธฐ์—…์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” Recoil์ด๋ผ๋Š” ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ๋„์ž…ํ•˜์—ฌ ์‚ฌ์šฉํ•ด๋ดค๋‹ค. ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณธ ์ƒํƒœ๊ด€๋ฆฌ์ธ๋ฐ '์ด๊ฒŒ ๋งž๋‚˜?' ๊ฐธ์šฐ๋šฑ ํ•˜๋ฉด์„œ ์ž‘์—…ํ•˜๋‹ค๋ณด๋‹ˆ ์–ด๋Š์ƒˆ ํ”„๋กœ์ ํŠธ๋„ ์™„์„ฑ๋„ ์žˆ๊ฒŒ ๋งˆ๋ฌด๋ฆฌ ์ง€์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.


Recoil ์‚ฌ์šฉ๋ฐฉ๋ฒ•

์„ค์น˜

$yarn add recoil or npm install recoil

๋ฆฌ์ฝ”์ผ์€ ๊ทธ๋ƒฅ yarn add recoil ํ•˜๋‚˜๋งŒ ์„ค์น˜ํ•ด์ฃผ๋ฉด ๋์ด๋‹ค.
Redux๋‚˜ Mobx์ฒ˜๋Ÿผ ๋˜ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋ถ€๊ฐ€์ ์œผ๋กœ ์„ค์น˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.
Redux๋Š” ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์œ„ํ•œ redux-thunk๋ผ๋˜๊ฐ€ redux-saga๋ผ๋˜๊ฐ€ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๋ฅผ ์œ„ํ•œ immer๋ผ๋˜๊ฐ€.. ์ด๋Ÿฐ ์„ค์น˜ํ• ๊ฒŒ ๋งŽ์•„์„œ ์‹ซ์—ˆ๋Š”๋ฐ.. ๋˜ MOBX๋กœ ์น˜๋ฉด mobx ์™ธ์— mobx-react, mobx-react-lite ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ์„ค์น˜ํ•ด ์ค˜์•ผํ•˜๋Š”๋ฐ recoil์€ ์ง„์งœ ์„ธ์ƒ ์‹ฌํ”Œํ•˜๋‹ค. โญ๏ธ

์ดˆ๊ธฐ ์„ธํŒ…

์ดˆ๊ธฐ ์„ธํŒ… ํ•˜๋Š” ๊ฒƒ๋งˆ์ € ์ง„์งœ ์ดˆ๊ฐ„๋‹จํ•˜๋‹ค.

  1. src/index.tsx
import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { Spin } from 'antd';
import { RecoilRoot } from 'recoil';
import 'antd/dist/antd.min.css';
import './index.scss';
const App = lazy(() => import('./App'));

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
   // ๐Ÿ‘‰ <RecoilRoot> ๋กœ ๊ฐ์‹ธ์ž !
    <RecoilRoot>
        <Suspense
            fallback={
                <main className="loading__spinner">
                    <Spin size="large" />
                </main>
            }
        >
            <App />
        </Suspense>
    </RecoilRoot>
);

์ด์ฒ˜๋Ÿผ RecoilRoot ๋กœ ๊ฐ์‹ธ๋ฉด ๋œ๋‹ค. ๊ทธ๋Ÿผ ๋์ž„.

๋””๋ ‰ํ† ๋ฆฌ ์ƒ์„ฑ - Store ๊ด€๋ฆฌ

Recoil, ๋˜ ์žฅ์ ์ด๋ผ๋ฉด atom์ด๋ž‘ selector์˜ ๊ฐœ๋…๋งŒ ์•Œ๋ฉด ๋์ด๋‹ค ๐Ÿ˜†
๋จผ์ € src/recoil ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ src/recoil/atom๊ณผ src/recoil/selector๋ฅผ ๊ฐ๊ฐ ๋ถ„๋ฆฌํ•˜์—ฌ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ–ˆ๋‹ค. mobx๋‚˜ Recoil์€ ๋„˜๋‚˜ ์ž์œ ๋กœ์šฐ๋‹ˆ ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•  ๋• ํ•จ๊ป˜ ํ˜‘์—…ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ ์ปจ๋ฒค์…˜ ์กฐ์œจํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜ ์ผ ๋“ฏํ•˜๋‹ค.

๐ŸŽ atom ์ด๋ž€?

์‰ฝ๊ฒŒ ๋งํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ๋…ํ•˜์—ฌ ์ƒํƒœ์˜ ๋ณ€ํ™”๋ฅผ ๋‚˜ํƒ€๋‚ด์ค€๋‹ค. ๋Œ€์ค‘์ ์œผ๋กœ ๋งŽ์ด ์ ‘ํ•ด๋ดค์„ Redux ๊ฐœ๋…์œผ๋กœ ์น˜๋ฉด store์˜ ์—ญํ• ์„ ํ•œ๋‹ค.

(1) atom ์„ ์–ธ ์‹œ **key๊ฐ’์€ ์œ ๋‹ˆํฌํ•œ ๋ช…๋ช…์„ ์ž…๋ ฅํ•˜๊ณ  default์— ์ƒํƒœ์˜ ์ดˆ๊ธฐ๊ฐ’์„ ์ž…๋ ฅํ•œ๋‹ค.
(2) atom์ด ์—…๋ฐ์ดํŠธ ๋˜๋ฉด ํ•ด๋‹น atom์„ ๊ตฌ๋…ํ•˜๊ณ  ์žˆ๋˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๊ฐ€ ๋ฆฌ๋ Œ๋” ๋˜์–ด ๋ณด์—ฌ์ง„๋‹ค.

atom ์˜ˆ์‹œ

src/recoil/atom/index.ts

import { atom } from 'recoil';
// ํƒ€์ž…
import { TotalTypes } from 'lib/type';
import { todayCall } from 'lib/day';
// โญ๏ธ ์ด๊ฐ™์ด ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ๋“ค์€ ๋ชจ๋“ˆํ™”ํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๋‹จ์ถ• ์‹œ์ผฐ๋‹น

// โญ๏ธ key์— ๊ณ ์œ ํ•œ ๊ฐ’ ์„ค์ •
// โญ๏ธ default์—๋Š” ์ดˆ๊ธฐ๊ฐ’ ์„ ์–ธ
export const daySearch = atom({
    key: 'daySearchShow',
    default: todayCall || ''
});

export const errorState = atom<any>({
    key: 'error',
    default: ''
});

atom์œผ๋กœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ๋Š” atom ๊ทธ๋ฆฌ๊ณ  atomFamily๊ฐ€ ์žˆ๋Š”๋ฐ, atomFamily๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ํ™” ํ•  ์ˆ˜ ์žˆ๋‹ค.

example
const myAtomFamily = atomFamily({
  key: โ€˜MyAtomโ€™,
  ๐Ÿ“default: param => defaultBasedOnParam(param),
});

๐Ÿ˜ถโ€๐ŸŒซ๏ธ ์ด์ œ atom์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ๊ตฌ๋…ํ•˜๋Ÿฌ ๊ฐ€๋ณผ๊นŒ์š” ใ…Ž

import React from 'react';
import './styles.scss';
import { useRecoilValue } from 'recoil';
import { daySearch } from 'recoil/atom';
import { todayCall } from 'lib/day';

const Header = () => {
	// โญ๏ธ useRecoilValue ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒœ ๊ตฌ๋…์‹œ์ผฐ๋‹ค.
   const currentSearch = useRecoilValue(daySearch);

    return (
        <header className="board1__header">
            <h1>{currentSearch === todayCall ? '(์‹ค์‹œ๊ฐ„)' : `(${currentSearch})`}</span>
            </h1>
        </header>
    );
};

export default Header;

atom ์—์„œ๋„ ์—ฌ๋Ÿฌ ๋ฉ”์„œ๋“œ๋“ค์„ ์ œ๊ณตํ•ด์ฃผ๋Š”๋ฐ, ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ž…๋ง›์— ๋งž๋Š” ๋ฉ”์„œ๋“œ๋“ค์„ ๊ณจ๋ผ ์“ฐ๋ฉด ๋œ๋‹ค.
์œ„ ์ฝ”๋“œ์—์„œ๋Š” useRecoilValue๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

atom ๋ฉ”์„œ๋“œ ์ข…๋ฅ˜ ๋ฐ ํŠน์ง•

  • useRecoilValue() : ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒํƒœ๋ฅผ ์ฝ์„ ์ˆ˜๋งŒ ์žˆ๊ฒŒ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. (์ƒํƒœ ์ฝ๊ธฐ๋งŒ ๊ฐ€๋Šฅ)
example
  const currentSearch = useRecoilValue(daySearch);
  • useRecoilState() : useState ์‚ฌ์šฉํ•˜๋“ฏ์ด ๊ธฐ์กด์— ์ƒํƒœ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. (์ƒํƒœ๋ฅผ ์ฝ๊ณ  ์“ฐ๊ธฐ๊ฐ€ ๊ฐ€๋Šฅ)
example
const [tempF, setTempF] = useRecoilState(tempFahrenheit);
const addTenCelsius = () => setTempC(tempC + 10);

 return (
    <div>
      Temp (Celsius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelsius}>Add 10 Celsius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
    </div>
  );
  • useSetRecoilState : setter ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค. atom ํ˜น์€ selector๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๋ฉด ๋ฆฌ๋ Œ๋”๋ง ํ•ด์ค€๋‹ค. (์“ฐ๊ธฐ ๊ฐ€๋Šฅ)

  • useResetRecoilState(): default ๊ฐ’์œผ๋กœ ๋ณ€๊ฒฝ ์‹œ์ผœ์ค€๋‹ค.

example
export const numberState = atom<any>({
    key: 'number',
    default: '100'
});

์ด๋ ‡๊ฒŒ default: '100' ์ด ๊ฐ’์œผ๋กœ ๋ณ€๊ฒฝํ•ด์ค€๋‹ค๋Š” ๋œป.

๐ŸŽ selector ๋ž€?

์ฃผ์–ด์ง„ ์ƒํƒœ์˜ ๋ณ€ํ™”๋ฅผ ์ค€๋‹ค.
๊ทธ๋ฆฌ๊ณ  selector์—์„œ api ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

  • ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ
export const getGlobalTotalApi = selectorFamily({
    key: 'get/GlobalTotal',
    get: (day: any) => async () => {
        if (!day) {
            return false;
        }
        const res = await fetcher(METHOD.GET, `/global/total?toDate=${day}`);
        return res.data;
    }
});

๐Ÿ‘‡ ์œ„ ํ•ด๋‹น ์ฝ”๋“œ์˜ fetcher ๋ชจ๋“ˆ์˜ ์ฝ”๋“œ ๋‚ด์šฉ๋ฌผ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

import React from 'react';
import axios from 'axios';
import { METHOD } from './type';

const apis = axios.create({
    baseURL: `${process.env.REACT_APP_INDEX_SERVER_URL}` // ๊ธฐ๋ณธ ์„œ๋ฒ„ ์ฃผ์†Œ ์ž…๋ ฅ
});

const fetcher = async (method: METHOD, url: string) => {
    try {
        const res = await apis[method](url);
        return res.data;
    } catch (error: any) {
        alert('๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.')
        location.reload();
        return error;
    }
};

export default fetcher;
  • atom์˜ ์ƒํƒœ ๋ณ€๊ฒฝ
import { daySearch } from '../atom';

export const dayValue = selector({
    key: 'dayValueText',
    get: ({ get }) => {
        const value = get(daySearch);
        if (value === todayCall) {
            return null;
        }
        return moment(value, 'YYYY-MM-DD');
    }
});

export const changeDate = selector({
    key: 'get/changeDate',
    get: ({ get }) => {
        const clickDay = get(daySearch).replaceAll('-', '');
        return clickDay;
    }
});

์ด๋ ‡๊ฒŒ selector๋Š” ๋น„๋™๊ธฐ ํ†ต์‹ ๋„ ๊ฐ€๋Šฅํ•˜๋ฉฐ atom์œผ๋กœ ๊ตฌ๋…ํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์ƒํƒœ๋“ค์˜ ๋ณ€ํ™”๋„ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋ฆฌ๋•์Šค๋กœ ์น˜๋ฉด ์•ก์…˜์˜ ์—ญํ• ์„ ํ•ด์ค€๋‹ค๊ณ  ๋ณด๋ฉด๋œ๋‹ค. selector๋„ atom์ฒ˜๋Ÿผ ๊ณ ์œ ํ•œ key๊ฐ’์„ ์ง€์ •ํ•ด ์ฃผ์–ด์•ผํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ๋„ atomFamily์ฒ˜๋Ÿผ selectorFamily๋ผ๋Š” ๊ฒƒ์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ ๋˜ํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜ํ™” ์‹œ์ผœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ณ€๊ฒฝ๋œ ์ƒํƒœ๋Š” get์— ์ž‘์„ฑํ•˜๊ณ  return ๊ฐ’์œผ๋กœ ๋ณ€๊ฒฝ๋œ ๊ฐ’์„ ๋ฐ˜ํ™˜์‹œ์ผœ์ค€๋‹ค.


๐Ÿ‘ป ์—ฌ๋Ÿฌ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์จ๋ณด๋ฉด์„œ ๋Š๋‚€์ 

์ง€๊ธˆ๊นŒ์ง€ ์‚ฌ์šฉํ•ด๋ณธ ์ƒํƒœ๊ด€๋ฆฌ๋Š” Redux, Mobx, Recoil ์ด๋ ‡๊ฒŒ 3๊ฐ€์ง€ ์žˆ๋Š”๋ฐ ํ•˜๋‚˜์”ฉ ํŠน์ง•๋“ค๊ณผ ์žฅ๋‹จ์ ์„ ์Š์–ด๋ณด์ž๋ฉด ์ด๋ ‡๋‹ค.

1. Redux

  • Flux ํŒจํ„ด์ด๋‹ค. (๋‹จ๋ฐฉํ–ฅ์œผ๋กœ ํ˜๋Ÿฌ๊ฐ„๋‹ค๋Š” ๋œป) Reducer + Flux ๊ฐ€ ํ•ฉ์ณ Redux ๋ผ๊ณ  ํ•œ๋‹ค.
  • ๋ฆฌ๋•์Šค devtools๋กœ ์—๋Ÿฌ๋‚œ ๋ถ€๋ถ„๋“ค์„ ์ถ”์ ํ•˜์—ฌ ์—๋Ÿฌ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๋‹ค.
    - ์•ก์…˜ํƒ€์ž…, ์•ก์…˜ ์ƒ์„ฑํ•จ์ˆ˜, ๋ฆฌ๋“€์„œ ๋“ฑ๋“ฑ์˜ ์ฝ”๋“œ๋“ค๋„ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.
  • ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” immer ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ•„์ˆ˜
  • ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด thunk๋‚˜ saga๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.
    - ์ด ์ฝ”๋“œ๋Š” ์ œ๋„ˆ๋ ˆ์ดํ„ฐ ๋ฐฉ์‹์ด๋ผ ์–ด๋ ต๊ฒŒ ๋Š๊ปด์งˆ ์ˆ˜ ์žˆ๋‹ค.
  • ์ด๋ ‡๊ฒŒ ๋ถ€๊ฐ€์ ์œผ๋กœ ์„ค์น˜ํ•ด์•ผ ๋  ์š”๊ฑด๋“ค์ด ๋งŽ์•„์„œ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋†’๋‹ค๋Š” ์ ์ด ์ตœ๊ณ ์˜ ๋‹จ์ ์ด๋‹ค.
  • ๊ผญ 1๊ฐœ์˜ store๋งŒ ์กด์žฌ
  • ๋ ˆํผ๋Ÿฐ์Šค ๋ฌธ์„œ๋“ค์ด ๋งŽ๋‹ค.

๋ฆฌ๋•์Šค ํŠน์ง•์„ ์ค„์ค„์ด ์ ๋‹ค๋ณด๋‹ˆ ๊ฑฐ์˜ ๋‹จ์ ๋งŒ ๋Š˜์–ด๋†“์€ ๋“ฏํ•œ.. ใ…‹ใ…‹

2. Mobx

  • OOP ๊ฐ์ฒด์ง€ํ–ฅ ํ˜•์‹์ด๋ผ ์ž๋ฐ” ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์นœ์ˆ™ํ•œ ์•„ํ‚คํ…์ณ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ดˆ๊ธฐ๊ฐ’ ๋”ฐ๋กœ ์„ ์–ธํ•ด์ฃผ์–ด์•ผ ํ•˜๊ณ , setter ํ•จ์ˆ˜์™€ getter ํ•จ์ˆ˜๋„ ๋”ฐ๋กœ ์„ ์–ธํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.
  • store ์ œํ•œ์ด ์—†๋‹ค. ์—ฌ๋Ÿฌ๊ฐœ์—ฌ๋„ ์ƒ๊ด€ ์—†์Œ
  • observable์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค. (observable์„=๊ด€์ฐฐ์ž)
  • ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ํ†ตํ•ด ๊น”๋”ํ•œ ์ฝ”๋“œ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • state์˜ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๋ฅผ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.
  • ์ž์œ ๋กœ์šด ์ ์ด ๋‹จ์ ์ด๋ผ๋ฉด ๋‹จ์ ์ด ๋  ์ˆ˜๋„ ์žˆ๋Š”๊ฒŒ ํ˜‘์—…์ž๋“ค๊ณผ ๋ฃฐ์„ ์ •ํ•ด์„œ ์ž‘์—…ํ•ด์•ผ ํ•œ๋‹ค.

3. Recoil

  • ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ๊ฐ€์žฅ ๋ฆฌ์•กํŠธ์Šค๋Ÿฝ๋‹ค. ๋ฆฌ์•กํŠธ hooks์˜ ๋Š๋‚Œ์œผ๋กœ ์นœ์ˆ™ํ•˜๊ฒŒ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ์Œ
  • ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๊ต‰์žฅํžˆ ๋‚ฎ๋‹ค.
    - ์œ„์—์„œ๋„ ์„ค๋ช… ํ–ˆ๋‹ค์‹œํ”ผ ์ดˆ๊ธฐ ์„ธํŒ…๋„ ์ •๋ง ๊ฐ„ํŽธํ•˜๊ณ  recoil ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์™ธ์— ๋”ฐ๋กœ ์„ค์น˜ํ•ด์•ผ ๋  ๊ฒƒ๋“ค์ด ์—†์–ด์„œ ์ข‹๋‹ค.
  • atom, selector ๊ธฐ๋Šฅ๋งŒ ์•Œ๊ณ ์žˆ๋‹ค๋ฉด ๊ตฌํ˜„ ์Œ‰๊ฐ€๋Šฅ
  • ์ด๊ฒƒ๋„ mobx ์ฒ˜๋Ÿผ ์ž์œ ๋กœ์›Œ์„œ ํ˜‘์—…์ž๋“ค๊ณผ ๋ฃฐ ์ •ํ•ด์„œ ์ž‘์—…ํ•ด์•ผํ•œ๋‹ค.
  • ๋””๋ฒ„๊น… ๋„๊ตฌ ์ง€์›์ด ๋ฏธ๋ฏธํ•˜๋‹ค.
  • ์ง๊ด€์ ์ด๊ณ  ๋‹จ์ˆœํ•œ ํŽธ์ด๋‹ค.

์ฐธ๊ณ ๋ฌธ์„œ : https://recoiljs.org/ko/docs/introduction/installation

profile
์•„๋Š‘ํ•œ ๋‡Œ๊ณต๊ฐ„ ๐Ÿง 

0๊ฐœ์˜ ๋Œ“๊ธ€