React - RestAPI, Zustand

REST API란?

서버와 통신하는 방식 중 한가지로 http 메서드를 사용하여 데이터를 요청/전송한다
REST는 인터넷 식별자(URI)와 HTTP프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법
데이터 포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, messgae로 구성
REST API는 url 주소와 메서드로 CRUD 요청을 하는 것 입니다.
클라이언트가 서버에게 요청을 보내는 유형은 크게 4가지로 나눌 수 있고, 이게 바로 CRUD


GET : 데이터 조회
POST : 데이터 등록
PUT : 데이터 수정
DELETE : 데이터 삭제

예시

// App.tsx
import { useEffect, useState } from "react";
const App = () => {
  const [data, setData] = useState(null);
  const fetchData = async () => {
    // const response = await fetch("http://localhost:3000/posts");
    // const data = await response.json();
    const data = await (
      await fetch("http://localhost:3000/posts", {
        method: "GET",
      })
    ).json();
    setData(data);
  };
  useEffect(() => {
    // API 통신
    // Fetch API / Axios
    fetch("http://localhost:3000/posts")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);
  return (
    <>
      <h1>App Component</h1>
      <p>{JSON.stringify(data)}</p>
    </>
  );
};
export default App;
// GET 방식
   const data = await (
      await fetch("http://localhost:3000/posts", {
        method: "GET",
      })
    ).json();
    setData(data);
// POST 방식
await fetch("http://localhost:3000/posts", {
      method: "POST",
      headers: {
        "Content-Type": "apllication/json",
      },
      body: JSON.stringify({
        id:3,
        title: "new title",
        views: 150,
      })
    })
// PATCH 방식
 await fetch("http://localhost:3000/posts", {
      method: "PATCH",
      headers: {
        "Content-Type": "apllication/json",
      },
      body: JSON.stringify({
        title: "123",
      }),
    })
// DELETE 방식
await fetch("http://localhost:3000/posts", {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
});

---

JSON-SERVER

JSON 서버를 이용하면 빠르고 쉽게 REST API를 구축 (사실상 가짜 API서버이므로 실제 프로젝트 개발시에는 사용X)

// 설치
npm install -g json-server

// 실행
npm run json-server

Zustand

Zustand는 JavaScript와 TypeScript 애플리케이션에서 상태 관리를 위한 작고 빠르고 확장 가능한 상태 관리 라이브러리
간단한 API를 제공하고, 다른 상태 관리 라이브러리보다 가벼우며, 설정이 간단하고 TS지원

Zustand의 작동 원리

상태 관리 : Zustand는 내부적으로 상태를 관리하기 위해 React Context를 사용하지 않는다. 대신, 자체적으로 상태를 관리하여 불필요한 리렌더링을 방지함
구독 시스템 : Zustand의 상태는 구독 시스템을 통해 필요한 부분만 리렌더링함. 상태가 변경될 때마다 관련 컴포넌트만 업데이트됨

npm install zustand
yarn add zustand

// 상태 스토어 생성 : 상태 스토어를 생성하기 위해 'create' 함수 사용
import create from 'zustand';
const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

// 상태 사용
import { useStore } from './store';
function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}
export default Counter;

Zustand 공식 홈페이지 Typescript 정의

import { create } from 'zustand'
type Store = {
  count: number
  inc: () => void
}
const useStore = create<Store>()((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))
function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}