Skip to content

Translate : useCallback #612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 10, 2023
Merged

Translate : useCallback #612

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2d25fb5
translate the <usecallback>document to korean
guesung May 2, 2023
d72fdd5
Fix word
guesung May 2, 2023
dfa8ee1
fix : parameter-매개변수, argument-인수 용어 변경
guesung May 3, 2023
8006c5a
fix : comment 반영
guesung May 6, 2023
f4264d1
Merge branch 'guesung-usecallback' of https://github.com/guesung/ko.r…
guesung May 6, 2023
60adefd
Merge branch 'main' into guesung-usecallback
hg-pyun May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/content/reference/react/useCallback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: useCallback

<Intro>

`useCallback` is a React Hook that lets you cache a function definition between re-renders.
`useCallback`은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다.

```js
const cachedFn = useCallback(fn, dependencies)
Expand All @@ -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';
Expand All @@ -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.

Expand Down