From 2d25fb57a740788ca4ed7801ebe075b76d6773db Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Tue, 2 May 2023 22:53:47 +0900 Subject: [PATCH 1/4] translate the document to korean --- src/content/reference/react/useCallback.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 63b36a600..9ae8f68c6 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -4,7 +4,7 @@ title: useCallback -`useCallback` is a React Hook that lets you cache a function definition between re-renders. +`useCallback`은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React Hook입니다. ```js const cachedFn = useCallback(fn, dependencies) @@ -16,11 +16,11 @@ const cachedFn = useCallback(fn, dependencies) --- -## Reference {/*reference*/} +## 문서 {/*reference*/} ### `useCallback(fn, dependencies)` {/*usecallback*/} -Call `useCallback` at the top level of your component to cache a function definition between re-renders: +컴포넌트의 최상위 레벨에서 useCallback을 호출하여 리렌더링 간 함수 정의를 캐시하세요. ```js {4,9} import { useCallback } from 'react'; @@ -36,9 +36,9 @@ export default function ProductPage({ productId, referrer, theme }) { [See more examples below.](#usage) -#### Parameters {/*parameters*/} +#### 인자 {/*parameters*/} -* `fn`: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On next renders, React will give you the same function again if the `dependencies` have not changed since the last render. Otherwise, it will give you the function that you have passed during the current render, and store it in case it can be reused later. React will not call your function. The function is returned to you so you can decide when and whether to call it. +* `fn`: 캐시하려는 함수입니다. 어떠한 인자를 취하고 어떠한 값을 반환해도 됩니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우, 다음 렌더링할 때 React는 동일한 함수를 다시 제공합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 제공하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. * `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. From d72fdd5c348dd68d8ff21b9d407dc53f240c1935 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Tue, 2 May 2023 23:01:57 +0900 Subject: [PATCH 2/4] Fix word --- src/content/reference/react/useCallback.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 9ae8f68c6..fde996b1a 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -20,7 +20,7 @@ const cachedFn = useCallback(fn, dependencies) ### `useCallback(fn, dependencies)` {/*usecallback*/} -컴포넌트의 최상위 레벨에서 useCallback을 호출하여 리렌더링 간 함수 정의를 캐시하세요. +컴포넌트의 최상위 레벨에서 useCallback을 호출하여 리렌더링 간 함수 선언 캐시하세요. ```js {4,9} import { useCallback } from 'react'; @@ -38,7 +38,7 @@ export default function ProductPage({ productId, referrer, theme }) { #### 인자 {/*parameters*/} -* `fn`: 캐시하려는 함수입니다. 어떠한 인자를 취하고 어떠한 값을 반환해도 됩니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우, 다음 렌더링할 때 React는 동일한 함수를 다시 제공합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 제공하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. +* `fn`: 캐시하려는 함수입니다. 어떠한 인자를 취하고 어떠한 값을 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. 다음 렌더링할 때, `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우 React는 동일한 함수를 다시 반환합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 반환하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. * `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. From dfa8ee1d8e1612266325e282aaf4cbc2edef40c0 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Wed, 3 May 2023 16:47:43 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix=20:=20parameter-=EB=A7=A4=EA=B0=9C?= =?UTF-8?q?=EB=B3=80=EC=88=98,=20argument-=EC=9D=B8=EC=88=98=20=EC=9A=A9?= =?UTF-8?q?=EC=96=B4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useCallback.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index fde996b1a..890715580 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -36,9 +36,9 @@ export default function ProductPage({ productId, referrer, theme }) { [See more examples below.](#usage) -#### 인자 {/*parameters*/} +#### 매개변수 {/*parameters*/} -* `fn`: 캐시하려는 함수입니다. 어떠한 인자를 취하고 어떠한 값을 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. 다음 렌더링할 때, `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우 React는 동일한 함수를 다시 반환합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 반환하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. +* `fn`: 캐시하려는 함수입니다. 어떠한 인를 취하고 어떠한 값을 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. 다음 렌더링할 때, `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우 React는 동일한 함수를 다시 반환합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 반환하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. * `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. From 8006c5a945933a9c3b00a437634b49cad786519e Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sat, 6 May 2023 23:03:10 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix=20:=20comment=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useCallback.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index fde996b1a..b91f9e1aa 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -4,7 +4,7 @@ title: useCallback -`useCallback`은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React Hook입니다. +`useCallback`은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. ```js const cachedFn = useCallback(fn, dependencies) @@ -16,11 +16,11 @@ const cachedFn = useCallback(fn, dependencies) --- -## 문서 {/*reference*/} +## 레퍼런스 {/*reference*/} ### `useCallback(fn, dependencies)` {/*usecallback*/} -컴포넌트의 최상위 레벨에서 useCallback을 호출하여 리렌더링 간 함수 선언 캐시하세요. +컴포넌트의 최상위 레벨에서 useCallback을 호출하여 리렌더링 간 함수 선언하세요. ```js {4,9} import { useCallback } from 'react'; @@ -38,7 +38,7 @@ export default function ProductPage({ productId, referrer, theme }) { #### 인자 {/*parameters*/} -* `fn`: 캐시하려는 함수입니다. 어떠한 인자를 취하고 어떠한 값을 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. 다음 렌더링할 때, `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우 React는 동일한 함수를 다시 반환합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 반환하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출할 시기와 여부를 결정할 수 있도록 반환됩니다. +* `fn`: 캐시하려는 함수입니다. 이 함수는 아무 인자나 받을 수 있고, 아무 값이나 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 반환(호출하지 않음)합니다. 이후 렌더링할 때 `dependencies`가 마지막 렌더링 이후 변경되지 않은 경우 React는 동일한 함수를 다시 반환합니다. 변경되었다면, React는 현재 렌더링 중에 전달한 함수를 반환하고 나중에 재사용할 수 있는지 확인하기 위해 저장합니다. React는 함수를 호출하지 않습니다. 함수는 호출 시점과 여부를 직접 결정할 수 있도록 반환됩니다. * `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm.