use-request

의존성 없는 React를 위한 Data Fetch 라이브러리

특징

• 의존성 없음
• 작은 번들 사이즈 (~30KB)
• 불필요한 리렌더링 없음
• TypeScript 지원
• ReactNative 지원

설치

npm

npm install @suyongs/use-request

Yarn

yarn add @suyongs/use-request

사용법

interface Post {
  title: string;
  content: string;
  author: string;
}

const fetcher = async (url, body: Post): Promise<Post> => {
  const reponse = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(body),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  return response.json();
};

const Component = () => {
  const { data, fetcher } = useRequest('https://example.com/upload', { fetcher });

  const onClick = () => {
    fetcher({
      title: 'title',
      content: 'content',
      author: 'author',
    });
  }

  return (
    <div>
      {data && <div>업로드 성공</div>}
      <button onClick={onClick}>업로드</button>
    </div>
  );
};