From 86f6a260644a80694b08d7ce3db8ca19b1d276ef Mon Sep 17 00:00:00 2001 From: MinHyeong Lee Date: Thu, 6 Feb 2025 16:31:18 +0900 Subject: [PATCH 1/4] docs: understanding.mdx for ko --- pages/docs/advanced/understanding.ko.mdx | 62 ++++++++++++------------ 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/pages/docs/advanced/understanding.ko.mdx b/pages/docs/advanced/understanding.ko.mdx index 440ab82e..ee83c5d5 100644 --- a/pages/docs/advanced/understanding.ko.mdx +++ b/pages/docs/advanced/understanding.ko.mdx @@ -1,59 +1,61 @@ import { Callout } from 'nextra-theme-docs' import Video from 'components/video' -# Understanding SWR +# SWR 이해하기 -## State Machine [#state-machine] +## 상태 머신 [#state-machine] -`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios. +`useSWR`은 `fetcher` 함수에 따라 `data`, `error`, `isLoading` 그리고 `isValidating`을 반환합니다. 이 다이어그램은 일부 시나리오에서 SWR이 값을 반환하는 방법을 설명합니다. -### Fetch and Revalidate [#fetch-and-revalidate] +### 데이터 가져오기 및 재검증 [#fetch-and-revalidate] -This pattern is to fetch data and revalidate it later. +이 패턴은 데이터를 가져온 후 나중에 다시 유효성을 검사하는 패턴입니다. ![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg) -### Key Change [#key-change] +### 키 변경 [#key-change] This pattern is to fetch data and change the key and revalidate it later. +이 패턴은 데이터를 가져온 후 키를 변경하고 나중에 다시 검증(revalidate)하는 방식입니다. ![A pattern for key change](/img/understanding/key-change.svg) -### Key Change + Previous Data [#key-change--previous-data] +### 키 변경 + 이전 데이터 [#key-change--previous-data] -This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option. +이 패턴은 데이터를 가져온 후 키를 변경하고, `keepPreviousData` 옵션을 사용하여 기존 데이터를 유지한 채 나중에 다시 검증하는 방식입니다. ![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg) -### Fallback [#fallback] +### 폴백 [#fallback] -This pattern is to fetch data and revalidate it later with fallback data. +이 패턴은 데이터를 가져온 후, 폴백 데이터(fallback data)를 사용하여 나중에 다시 검증하는 방식입니다. ![A pattern for fallback](/img/understanding/fallback.svg) -### Key Change + Fallback [#key-change--fallback] +### 키 변경 + 폴백 [#key-change--fallback] -This pattern is to fetch data and change the key and revalidate it later with fallback data. +이 패턴은 데이터를 가져온 후 키를 변경하고, 폴백 데이터를 사용하여 나중에 다시 검증하는 방식입니다. ![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg) -### Key Change + Previous Data + Fallback [#key-change--previous-data--fallback] +### 키 변경 + 이전 데이터 + 폴백 [#key-change--previous-data--fallback] -This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data. +이 패턴은 데이터를 가져온 후 키를 변경하고, `keepPreviousData` 옵션과 폴백 데이터를 함께 사용하여 나중에 다시 검증하는 방식입니다. ![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg) -## Combining with isLoading and isValidating for better UX [#combining-with-isloading-and-isvalidating-for-better-ux] +## isLoading 및 isValidating을 활용한 UX 개선 [#combining-with-isloading-and-isvalidating-for-better-ux] Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX. +기존의 `isValidating` 값과 비교했을 때, `isLoading`은 보다 일반적인 로딩 상태를 다루는 새로운 속성입니다. -- `isValidating` becomes `true` whenever there is an ongoing request **whether the data is loaded or not** -- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**. +- `isValidating`은 **데이터가 로드되었는지 여부와 상관없이** 요청이 진행 중이면 항상 true가 됩니다. +- `isLoading`은 요청이 진행 중이면서 **아직 데이터가 로드되지 않은 경우에만** true가 됩니다. -Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display. +간단히 말해, `isValidating`은 재검증이 진행될 때마다 이를 나타내는 데 사용하고, `isLoading`은 SWR이 재검증 중이지만 아직 표시할 데이터가 없는 경우 이를 나타내는 데 사용할 수 있습니다. - Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display. + 폴백 데이터와 이전 데이터는 "로드된 데이터"로 간주되지 않으므로 폴백 데이터를 사용하거나 keepPreviousData 옵션을 활성화하면 표시할 데이터가 있을 수 있습니다. ```jsx @@ -62,12 +64,12 @@ function Stock() { refreshInterval: 3000 }); - // If it's still loading the initial data, there is nothing to display. - // We return a skeleton here. + // 여전히 초기 데이터를 로드하는 중이라면 표시할 내용이 없습니다. + // 여기서 스켈레톤을 반환합니다. if (isLoading) return
; - // Otherwise, display the data and a spinner that indicates a background - // revalidation. + // 그렇지 않으면 데이터와 배경을 나타내는 스피너를 표시합니다. + // 재검증합니다. return ( <>
${data}
@@ -79,11 +81,11 @@ function Stock() { ![An example of using the isLoading state](/img/understanding/isloading.gif) -You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow) +코드 예제는 [여기](https://codesandbox.io/s/swr-isloading-jtopow)에서 찾을 수 있습니다. -## Return previous data for better UX [#return-previous-data-for-better-ux] +## 이전 데이터를 반환하여 UX 개선 [#return-previous-data-for-better-ux] -When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI: +입력 시 실시간으로 검색하는 것과 같이 지속적인 사용자 동작을 기반으로 데이터를 가져오는 경우 이전에 가져온 데이터를 유지하면 UX를 크게 개선할 수 있습니다. `keepPreviousData`는 해당 동작을 활성화하는 옵션입니다. 다음은 간단한 검색 UI입니다: ```jsx function Search() { @@ -110,7 +112,7 @@ function Search() { } ``` -With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again. +`keepPreviousData`를 활성화하면 SWR 키를 변경하고 새 키의 데이터가 다시 로딩되기 시작하더라도 이전 데이터를 계속 가져올 수 있습니다.