docs(react): update doc of suspense (#186)

packages/react/src/Suspense.en.mdx

@@ -5,9 +5,9 @@ title: Suspense
 
 This component is just wrapping [React's Suspense](https://reactjs.org/docs/react-api.html#reactsuspense). to use Suspense easily in Server-side rendering environment like [Next.js](https://nextjs.org)
 
-### Default mode
+### `<Suspense/>`
 
-Default Suspense will be just Suspense of original React.
+@suspensive/react's `<Suspense/>` will be just Suspense of original React.
 
 ```tsx
 // @suspensive/react's Suspense is just React.Suspense
@@ -18,9 +18,9 @@ const DefaultMode = () => (
 )
 ```
 
-### CSROnly mode
+### `<Suspense.CSROnly/>`
 
-But if you turn on CSROnly mode, Suspense will return fallback first. After mount, return children only in client. but in server, return fallback only.
+`<Suspense.CSROnly/>` will return fallback first. After mount, return children only in client. but in server, return fallback only.
 
 ```tsx
 // This will expose children in client-side rendering only.
@@ -31,6 +31,32 @@ const CSROnlyMode = () => (
 )
 ```
 
-#### Migration support SSR gradually (Suspense.CSROnly -> default Suspense)
+#### Migration support SSR gradually (`<Suspense.CSROnly/>` -> `<Suspense/>`)
 
-If you want to use default Suspense working in both SSR/CSR, You can change Suspense.CSROnly to default Suspense gradually.
+If you want to use default Suspense working in both SSR/CSR, You can change `<Suspense.CSROnly/>` to `<Suspense/>` gradually.
+
+## withSuspense
+
+You can use withSuspense to wrap component easily.
+we don't need to make unncessary code to wrap it if we use withSuspense like below.
+withSuspense's 2nd parameter is props of `<Suspense/>` without children
+
+```tsx
+const SuspenseWrapped = withSuspense(
+ function Component() {
+ // code make suspending
+
+ return <>...</>
+ },
+ { fallback: <Spinner /> }
+)
+
+const SuspenseCSROnlyWrapped = withSuspense.CSROnly(
+ function Component() {
+ // code make suspending
+
+ return <>...</>
+ },
+ { fallback: <Spinner /> }
+)
+```

packages/react/src/Suspense.ko.mdx

@@ -5,9 +5,9 @@ title: Suspense
 
 이 컴포넌트는 단지 [Next.js](https://nextjs.org)와 같은 서버 측 렌더링 환경에서 쉽게 [React Suspense](https://reactjs.org/docs/react-api.html#reactsuspense)를 사용하기 위해 만들어졌습니다.
 
-### Default 모드
+### `<Suspense/>`
 
-기본적으로 @suspensive/react의 Suspense는 React의 Suspense가 됩니다.
+@suspensive/react의 `<Suspense/>`는 React의 Suspense가 됩니다.
 
 ```tsx
 // @suspensive/react의 Suspense는 단지 React.Suspense입니다.
@@ -18,9 +18,9 @@ const DefaultMode = () => (
 )
 ```
 
-### CSROnly 모드
+### `<Suspense.CSROnly/>`
 
-CSROnly 모드를 사용하면 Suspense는 fallback을 먼저 return하고 컴포넌트가 마운트된 후, 클라이언트 사이드에서만 children이 return됩니다. 하지만 서버 사이드에서는 fallback만이 return됩니다.
+`<Suspense.CSROnly/>`는 fallback을 먼저 return하고 컴포넌트가 마운트된 후, 클라이언트 사이드에서만 children이 return됩니다. 하지만 서버 사이드에서는 fallback만이 return됩니다.
 
 ```tsx
 // 오직 클라이언트 사이드 렌더링에서만 children을 노출합니다.
@@ -31,6 +31,32 @@ const CSROnlyMode = () => (
 )
 ```
 
-#### SSR을 지원하도록 점진적으로 마이그레이션하기 (Suspense.CSROnly -> default Suspense)
+#### SSR을 지원하도록 점진적으로 마이그레이션하기 (`<Suspense.CSROnly/>` -> `<Suspense/>`)
 
-React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 Suspense.CSROnly에서 Default Suspense로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
+React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 `<Suspense.CSROnly/>`에서 `<Suspense/>`로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.
+
+## withSuspense
+
+withSuspense를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.
+아래와 같이 withSuspense를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withSuspense의 두 번째 인자는 children이 없는 `<Suspense/>`의 props입니다.
+
+```tsx
+const SuspenseWrapped = withSuspense(
+ function Component() {
+ // code make suspending
+
+ return <>...</>
+ },
+ { fallback: <Spinner /> }
+)
+
+const SuspenseCSROnlyWrapped = withSuspense.CSROnly(
+ function Component() {
+ // code make suspending
+
+ return <>...</>
+ },
+ { fallback: <Spinner /> }
+)
+```