docs: translate cache reference page

Author: boram2445

src/content/reference/react/cache.md

@@ -4,7 +4,7 @@ title: cache
 
 <RSC>
 
-`cache` is only for use with [React Server Components](/reference/rsc/server-components).
+`cache`는 [React 서버 컴포넌트](/reference/rsc/server-components)에서만 사용할 수 있습니다.
 
 </RSC>
 
@@ -61,10 +61,10 @@ function Chart({data}) {
 
 #### 주의 사항 {/*caveats*/}
 
-- React will invalidate the cache for all memoized functions for each server request.
-- Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache.
-- `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments.
-- `cache` is for use in [Server Components](/reference/rsc/server-components) only.
+- React는 서버 요청이 발생할 때마다 모든 메모화된 함수의 캐시를 무효화합니다.
+- `cache`를 호출할 때마다 새로운 함수가 생성됩니다. 따라서 같은 함수로 `cache`를 여러 번 호출하면 캐시를 공유하지 않는 별개의 메모화된 함수를 반환합니다.
+- `cachedFn`은 오류도 캐싱합니다. `fn`이 특정 인수에 대해 오류를 발생시키면 해당 오류가 캐싱되고, 이후 같은 인수로 `cachedFn`을 호출하면 같은 오류가 다시 발생합니다.
+- `cache`는 [서버 컴포넌트](/reference/rsc/server-components)에서만 사용할 수 있습니다.
 
 ---
 
@@ -95,13 +95,11 @@ function TeamReport({users}) {
 ```
 같은 `user` 객체가 `Profile`과 `TeamReport`에서 렌더링될 때, 두 컴포넌트는 작업을 공유하고, `user`를 위한 `calculateUserMetrics`를 한 번만 호출합니다.
 
-If the same `user` object is rendered in both `Profile` and `TeamReport`, the two components can share work and only call `calculateUserMetrics` once for that `user`.
+`Profile`이 먼저 렌더링된다고 가정해 봅시다. `Profile`은 <CodeStep step={1}>`getUserMetrics`</CodeStep>를 호출해 캐싱된 결과가 있는지 확인합니다. 해당 `user`로 `getUserMetrics`를 호출한 것이 처음이므로 캐시 미스가 발생합니다. 그러면 `getUserMetrics`는 해당 `user`와 함께 `calculateUserMetrics`를 호출하고 그 결과를 캐시에 저장합니다.
 
-Assume `Profile` is rendered first. It will call <CodeStep step={1}>`getUserMetrics`</CodeStep>, and check if there is a cached result. Since it is the first time `getUserMetrics` is called with that `user`, there will be a cache miss. `getUserMetrics` will then call `calculateUserMetrics` with that `user` and write the result to cache.
+`TeamReport`가 `users` 목록을 렌더링하다가 같은 `user` 객체에 도달하면, <CodeStep step={2}>`getUserMetrics`</CodeStep>를 호출해 캐시에서 결과를 읽어옵니다.
 
-When `TeamReport` renders its list of `users` and reaches the same `user` object, it will call <CodeStep step={2}>`getUserMetrics`</CodeStep> and read the result from cache.
-
-If `calculateUserMetrics` can be aborted by passing an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), you can use [`cacheSignal()`](/reference/react/cacheSignal) to cancel the expensive computation if React has finished rendering. `calculateUserMetrics` may already handle cancellation internally by using `cacheSignal` directly.
+[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)을 전달해 `calculateUserMetrics`를 중단할 수 있다면, [`cacheSignal()`](/reference/react/cacheSignal)을 사용해 React가 렌더링을 마친 뒤 고비용 연산을 취소할 수 있습니다. `calculateUserMetrics`가 `cacheSignal`을 직접 사용해 내부적으로 이미 취소를 처리하고 있을 수도 있습니다.
 
 <Pitfall>
 
@@ -169,12 +167,12 @@ export default function Precipitation({cityData}) {
   // ...
 }
 ```
-Here, both components call the <CodeStep step={3}>same memoized function</CodeStep> exported from `./getWeekReport.js` to read and write to the same cache.
+이렇게 하면 두 컴포넌트가 `./getWeekReport.js`에서 내보낸 <CodeStep step={3}>같은 메모화된 함수</CodeStep>를 호출하므로, 같은 캐시를 읽고 쓰게 됩니다.
 </Pitfall>
 
 ### 데이터의 스냅샷 공유하기 {/*take-and-share-snapshot-of-data*/}
 
-To share a snapshot of data between components, call `cache` with a data-fetching function like `fetch`. When multiple components make the same data fetch, only one request is made and the data returned is cached and shared across components. All components refer to the same snapshot of data across the server render.
+컴포넌트 사이에서 데이터의 스냅샷을 공유하려면 `fetch`처럼 데이터를 가져오는 함수와 함께 `cache`를 호출하세요. 여러 컴포넌트가 같은 데이터를 가져올 때 요청은 한 번만 일어나고, 반환된 데이터는 캐싱되어 컴포넌트끼리 공유됩니다. 서버 렌더링 내내 모든 컴포넌트가 같은 데이터 스냅샷을 참조합니다.
 
 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]]
 import {cache} from 'react';
@@ -195,15 +193,15 @@ async function MinimalWeatherCard({city}) {
 }
 ```
 
-If `AnimatedWeatherCard` and `MinimalWeatherCard` both render for the same <CodeStep step={1}>city</CodeStep>, they will receive the same snapshot of data from the <CodeStep step={2}>memoized function</CodeStep>.
+`AnimatedWeatherCard`와 `MinimalWeatherCard`가 같은 <CodeStep step={1}>city</CodeStep>로 렌더링된다면, 두 컴포넌트는 <CodeStep step={2}>메모화된 함수</CodeStep>에서 같은 데이터 스냅샷을 받습니다.
 
 `AnimatedWeatherCard`와 `MinimalWeatherCard`가 다른 <CodeStep step={1}>city</CodeStep>를 <CodeStep step={2}>`getTemperature`</CodeStep>의 인수로 받게 된다면, `fetchTemperature`는 두 번 호출되고 호출마다 다른 데이터를 받게됩니다.
 
 <CodeStep step={1}>city</CodeStep>가 캐시 키<sup>Key</sup>처럼 동작하게 됩니다.
 
 <Note>
 
-<CodeStep step={3}>Asynchronous rendering</CodeStep> is only supported for Server Components.
+<CodeStep step={3}>비동기 렌더링</CodeStep>은 서버 컴포넌트에서만 지원됩니다.
 
 ```js [[3, 1, "async"], [3, 2, "await"]]
 async function AnimatedWeatherCard({city}) {
@@ -212,7 +210,7 @@ async function AnimatedWeatherCard({city}) {
 }
 ```
 
-To render components that use asynchronous data in Client Components, see [`use()` documentation](/reference/react/use).
+클라이언트 컴포넌트에서 비동기 데이터를 사용하는 컴포넌트를 렌더링하려면 [`use()` 문서](/reference/react/use)를 참고하세요.
 
 </Note>
 
@@ -257,7 +255,7 @@ function Page({id}) {
 
 [비동기 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)의 결과를 보면, [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 받습니다. 이 Promise는 작업에 대한 상태(_대기_, _완료_, _실패_)와 최종적으로 확정된 결과를 가지고 있습니다.
 
-In this example, the asynchronous function <CodeStep step={1}>`fetchData`</CodeStep> returns a promise that is awaiting the `fetch`.
+이 예시에서 비동기 함수 <CodeStep step={1}>`fetchData`</CodeStep>는 `fetch`를 기다리는 Promise를 반환합니다.
 
 ```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]]
 async function fetchData() {
@@ -278,7 +276,7 @@ async function MyComponent() {
 
 첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 기다리지<sup>`await`</sup> 않지만 <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)은 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>는 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
 
-If by the <CodeStep step={3}>second call</CodeStep> the promise is still _pending_, then `await` will pause for the result. The optimization is that while we wait on the `fetch`, React can continue with computational work, thus reducing the wait time for the <CodeStep step={3}>second call</CodeStep>.
+<CodeStep step={3}>두 번째 호출</CodeStep> 시점에도 Promise가 여전히 _대기_ 상태라면, `await`는 결과가 나올 때까지 멈춥니다. `fetch`를 기다리는 동안 React가 계산 작업을 이어갈 수 있어 <CodeStep step={3}>두 번째 호출</CodeStep>의 대기 시간이 줄어드는 것이 여기서 얻는 이점입니다.
 
 _완료된_ 결과나 오류에 대한 Promise가 이미 정해진 경우, `await`는 즉시 값을 반환합니다. 두 결과 모두 성능상의 이점이 있습니다.
 </DeepDive>
@@ -306,7 +304,7 @@ async function DemoProfile() {
 
 React는 컴포넌트에서 메모화된 함수의 캐시 접근만 제공합니다. 컴포넌트 외부에서 <CodeStep step={1}>`getUser`</CodeStep>를 호출하면 여전히 함수를 실행하지만, 캐시를 읽거나 업데이트하지는 않습니다.
 
-This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component.
+캐시 접근은 컴포넌트에서만 사용할 수 있는 [Context](/learn/passing-data-deeply-with-context)를 통해 제공되기 때문입니다.
 
 </Pitfall>
 
@@ -318,7 +316,7 @@ This is because cache access is provided through a [context](/learn/passing-data
 
 #### `useMemo` {/*deep-dive-use-memo*/}
 
-In general, you should use [`useMemo`](/reference/react/useMemo) for caching an expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component.
+일반적으로 클라이언트 컴포넌트에서 렌더링 간에 고비용 연산을 캐싱할 때는 [`useMemo`](/reference/react/useMemo)를 사용해야 합니다. 컴포넌트 안에서 데이터를 변환한 결과를 메모화하는 경우가 그 예입니다.
 
 ```jsx {4}
 'use client';
@@ -338,8 +336,9 @@ function App() {
   );
 }
 ```
+이 예시에서 `App`은 같은 record로 `WeatherReport` 두 개를 렌더링합니다. 두 컴포넌트가 같은 작업을 하더라도 작업을 공유할 수는 없습니다. `useMemo`의 캐시는 해당 컴포넌트 안에만 존재합니다.
 
-However, `useMemo` does ensure that if `App` re-renders and the `record` object doesn't change, each component instance would skip work and use the memoized value of `avgTemp`. `useMemo` will only cache the last computation of `avgTemp` with the given dependencies.
+다만 `App`이 다시 렌더링되어도 `record` 객체가 변하지 않았다면, `useMemo`는 각 컴포넌트 인스턴스가 작업을 생략하고 메모화된 `avgTemp` 값을 사용하도록 보장합니다. `useMemo`는 주어진 의존성에 대한 `avgTemp`의 마지막 연산 결과만 캐싱합니다.
 
 #### `cache` {/*deep-dive-cache*/}
 
@@ -392,7 +391,7 @@ function App() {
 }
 ```
 
-In this example, both `MemoWeatherReport` components will call `calculateAvg` when first rendered. However, if `App` re-renders, with no changes to `record`, none of the props have changed and `MemoWeatherReport` will not re-render.
+이 예시에서 두 `MemoWeatherReport` 컴포넌트는 처음 렌더링될 때 `calculateAvg`를 호출합니다. 하지만 `record`가 변하지 않은 채로 `App`이 다시 렌더링되면, 프로퍼티가 하나도 변하지 않았으므로 `MemoWeatherReport`는 다시 렌더링되지 않습니다.
 
 `useMemo`와 비교하면 `memo`는 프로퍼티와 특정 계산을 기반으로 컴포넌트 렌더링을 메모화합니다. `useMemo`와 유사하게, 메모화된 컴포넌트는 마지막 프로퍼티 값에 대한 마지막 렌더링을 캐싱합니다. 프로퍼티가 변경되면, 캐시는 무효화되고 컴포넌트는 다시 렌더링됩니다.