React 상태관리 (zustand 사용하기)

zustand 설치

=> npm i zustand

import create from 'zustand'; //zustand 불러오기💡
import axios from 'axios';
import { useEffect, useState } from 'react';
import UseRef from './components/UseRef';

//create(()=>({....}))함수 안에 객체 형식으로 보관하고 싶은 state 넣기(변수, 함수 다 가능). 이것을 변수(useStore)에 담아서 사용. 
export const useStore = create((set) => ({
  count: 0,
  countUp: () => set((state) => ({ count: state.count + 1 })),
  name: '혜진',
  fetchDate: async () => {
    const result = await  axios('https://jsonplaceholder.typicode.com/posts');
    return result.data[0];
  },
}));

function App() {
  const { countUp } = useStore();
  return (
    <>
      <div>구독자</div>
      <button onClick={countUp}>+</button>
      <Card />
      <UseRef />
    </>
  );
}

export const Card = () => {
  //사용하고 싶은 컴포넌트에서 불러와 (useStore()) 사용한다.
  const { count, fetchDate } = useStore();
  const [data, setData] = useState('');
  (async () => {
    const { id, userId, title } = await fetchDate();
    setData(title);
  })();

  return <> 카드 {data} </>;
};

export default App;