release: 0.2.0

docs/index.md

@@ -1,6 +1,6 @@
 # Document
-* [English](./en/basic.md)
-* [한국어](./ko/basic.md)
+* [English](./en/index.md)
+* [한국어](./ko/index.md)
 
 # Translation
 if you want to translate this documents, please create a Pull request

docs/ko/basic.md

@@ -101,4 +101,4 @@ const Parent = () => {
 ```
 예제 처럼 다른 컴포넌트이지만 같은 URL을 사용하고 있다면 그 값이 **동기화**됩니다. 또한 `Parent` 컴포넌트의 총 렌더링 횟수는 `data`가 변경된 횟수입니다. 여기서  `use-request`의 특징이 드러납니다. `useRequest`는 오직 사용한 프로퍼티가 업데이트 되어야 리렌더링을 발생시킵니다.
 
-> 물론 **URL**이 같지만 개별적으로 **request**를 보낼 수도 있습니다. `use-request`는 그점을 이해하고 있기때문에 [cache](./options.md#cache) 옵션과 [RequestConfigProvider](./request-config.md)를 지원하고 있습니다.
+> 물론 **URL**이 같지만 개별적으로 **request**를 보낼 수도 있습니다. `use-request`는 그점을 이해하고 있기때문에 [cache](./options.md#cache) 옵션과 [RequestConfig](./request-config.md)를 지원하고 있습니다.

docs/ko/cache.md

@@ -0,0 +1,3 @@
+# Cache
+
+> TODO

docs/ko/index.md

@@ -0,0 +1,12 @@
+# 목차
+1. [시작](basic.md)
+    1. [빠른 시작](basic.md#빠른%20시작)
+1. [옵션](options.md)
+    1. [initWith](options.md#initWith)
+    1. [cache](options.md#cache)
+    1. [dedupingFetching](options.md#dedupingFetching)
+    1. [initWhenUndefined](options.md#initWhenUndefined)
+    1. ~~[UNSTABLE__suspense](options.md#UNSTABLE__suspense)~~
+1. [Fetcher](fetcher.md)
+
+> TODO

docs/ko/options.md

@@ -2,7 +2,8 @@
 `useRequest`의 옵션으로 사용할 수 있는것들은 다음과 같습니다.
 * `initWith?: Data | null`
 * `cache?: boolean`
-* `ignoreWhenFetching?: boolean`
+* `dedupingFetching?: boolean`
+* `initWhenUndefined?: boolean`
 * ~~`UNSTABLE__suspense?: boolean`~~ (지원 예정입니다)
 
 ## initWith
@@ -104,15 +105,54 @@ const PostPage = () => {
 
 TODO
 
-> `cache`를 구현하는 [StateManager](./state.md)에 대한 내용은 [state.md](./state.md)를 확인해주세요.
+> `cache`를 구현하는 [Cache](./cache.md)에 대한 내용은 [cache.md](./cache.md)를 확인해주세요.
 
-## ignoreWhenFetching
-`ignoreWhenFetching` 옵션은 데이터를 불러오고 있을때, `useRequest.fetcher`를 여러번 호출하더라도 무시하는 옵션입니다.
+## dedupingFetching
+`dedupingFetching` 옵션은 데이터를 불러오고 있을때, `useRequest.fetcher`를 여러번 호출하더라도 무시하는 옵션입니다.
 
-동시에 같은 request를 여러번 보내는 경우는 거의 존재하지 않습니다. 일반적으로 UI의 반응성이 느려 사용자가 여러번 요청을 하게되는 경우가 대부분입니다.
-이 라이브러리는 UI 반응성이 느린 경우에 서버에 여러번 호출을 보내 부하를 거는 경우를 줄이기 위하여 이 옵션을 기본값으로 `true`로 설정하고 있습니다.
+동일한 엔드포인트에 `request`를 여러번 보내는 경우는 거의 존재하지 않습니다. 일반적으로 UI의 반응성이 느려 사용자가 여러번 요청을 하게되어 동일한 엔드포인트에 여러번 호출이 가는 경우가 대부분입니다.
 
-정말로 이 request를 병렬적으로 보낼 가능성이 있을 경우에만 `false`로 설정하는것을 추천합니다.
+`use-request`는 이러한 경우를 막을 수 있습니다. 동일한 요청을 보내는것을 막게되면, 백엔드의 비용도 낮아지게 됩니다. 따라서 `use-request`는 이 옵션을 기본값으로 `true`로 설정하고 있습니다.
+
+이때 실제로 이 옵션으로 호출을 무시하려면 아래와 같은 조건을 **모두** 만족해야합니다.
+1. 동일한 `id`의 `request`가 존재한다.
+1. 해당 `request`가 `isValidating`이 `true`인 상태이다.
+
+위의 두 조건에 만족했을때. `use-request`는 사용자가 요청한 fetch를 **무시**합니다. 
+
+## initWhenUndefined
+`initWhenUndefined`옵션은 `initWith` 옵션과 함께 이용됩니다.
+`initWith`옵션을 이용하여 훅이 사용되자 말자 `request`를 전송할때, `data`의 유무에 따라 요청을 조절할 수 있습니다.
+
+예를들어
+```tsx
+const Child = () => {
+  const { data } = useRequest(url, {
+    initWith: [],
+    initWhenUndefined: true,
+  });
+
+  return (
+    <div>
+      {data}
+    </div>
+  )
+};
+
+const Component = () => {
+  const [count, setCount] = useState(1);
+
+  return (
+    <div>
+      {Array.from({ length: count }).map((_, index) => (
+        <Child key={index} />,
+      ))}
+      <button onClick={() => setCount((it) => it + 1)}>추가</button>
+    </div>
+  );
+};
+```
+위와 같은 경우에는 `Child`컴포넌트가 추가되더라도 **단 한번**의 `request`만 발생합니다. 만약 `initWhenUndefined`를 `false`로 바꾼다면, `Child` 컴포넌트가 마운트 될때마다 요청을 보냅니다.
 
 ## UNSTABLE__suspense
 `UNSTABLE__suspense`는 아직 구현되지 않은 옵션입니다. React Suspense를 지원하기 위해 만들어진 옵션입니다

docs/ko/request-config.md

@@ -1,4 +1,7 @@
-# RequestConfigProvider
-`RequestConfigProvider`는 아직 `interface`가 확정되지 않았습니다.
+# RequestConfig
 
 > TODO
+
+## useRequestConfig
+
+> TODO

example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/README.md

@@ -0,0 +1,9 @@
+# Example for use-request
+example for use-request
+
+# Installation
+`npm run build:parent`
+`npm install`
+
+# start
+`npm run dev`

example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>use-request Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>