Skip to content

Commit 8b5a2fc

Browse files
authored
fix: typo 'render' linted by textlint (#1011)
1 parent 50c1eaa commit 8b5a2fc

14 files changed

+22
-22
lines changed

Diff for: src/content/learn/referencing-values-with-refs.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ export default function Counter() {
232232

233233
</Sandpack>
234234

235-
이것이 render 중에 `ref.current`를 출력하면 신뢰할 수 없는 코드가 나오는 이유입니다. 이 부분이 필요하면 state를 대신 사용해야 합니다..
235+
이것이 렌더링 중에 `ref.current`를 출력하면 신뢰할 수 없는 코드가 나오는 이유입니다. 이 부분이 필요하면 state를 대신 사용해야 합니다.
236236

237237
<DeepDive>
238238

@@ -271,7 +271,7 @@ React는 `useRef`가 실제로 충분히 일반적이기 때문에 built-in 버
271271
- **refs를 escape hatch로 간주합니다.** Refs는 외부 시스템이나 브라우저 API로 작업할 때 유용합니다. 애플리케이션 로직과 데이터 흐름의 상당 부분이 refs에 의존한다면 접근 방식을 재고해 보는 것이 좋습니다.
272272
- **렌더링 중에 `ref.current`를 읽거나 쓰지 마세요.** 렌더링 중에 일부 정보가 필요한 경우 [state](/learn/state-a-components-memory)를 대신 사용하세요. `ref.current`가 언제 변하는지 React는 모르기 때문에 렌더링할 때 읽어도 컴포넌트의 동작을 예측하기 어렵습니다. (`if (!ref.current) ref.current = new Thing()` 과 같은 코드는 첫 번째 렌더 중에 ref를 한 번만 설정하는 경우가 예외입니다.)
273273

274-
React state의 제한은 refs에 적용되지 않습니다. 예를 들어 state는 [모든 render에 대한 snapshot](/learn/state-as-a-snapshot)[동기적으로 업데이트되지 않는 것](/learn/queueing-a-series-of-state-updates)과 같이 작동합니다. 그러나 ref의 current 값을 변조하면 다음과 같이 즉시 변경됩니다.
274+
React state의 제한은 refs에 적용되지 않습니다. 예를 들어 state는 [모든 렌더링에 대한 snapshot](/learn/state-as-a-snapshot)[동기적으로 업데이트되지 않는 것](/learn/queueing-a-series-of-state-updates)과 같이 작동합니다. 그러나 ref의 current 값을 변조하면 다음과 같이 즉시 변경됩니다.
275275

276276
```js
277277
ref.current = 5;

Diff for: src/content/learn/synchronizing-with-effects.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -908,7 +908,7 @@ export default function ChatRoom({ roomId }) {
908908
909909
React는 이 Effect를 실행하며, `'general'` 채팅방에 연결합니다.
910910
911-
#### 같은 의존성 사이에서의 재랜더링 {/*re-render-with-same-dependencies*/}
911+
#### 같은 의존성 사이에서의 재렌더링 {/*re-render-with-same-dependencies*/}
912912
913913
`<ChatRoom roomId="general" />`가 다시 렌더링된다고 가정해봅시다. JSX 결과물은 동일합니다.
914914

Diff for: src/content/learn/thinking-in-react.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T
441441
442442
</ConsoleBlock>
443443
444-
위에 있는 샌드박스를 보면, `ProductTable``SearchBar``filterText``inStockOnly` props를 table, input과 체크 박스를 렌더하기 위해서 읽고 있습니다. 예를 들면, `SearchBar` input의 value를 아래와 같이 채우고 있습니다.
444+
위에 있는 샌드박스를 보면, `ProductTable``SearchBar``filterText``inStockOnly` props를 table, input과 체크 박스를 렌더링하기 위해서 읽고 있습니다. 예를 들면, `SearchBar` input의 value를 아래와 같이 채우고 있습니다.
445445
446446
```js {1,6}
447447
function SearchBar({ filterText, inStockOnly }) {

Diff for: src/content/reference/react-dom/client/hydrateRoot.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1178,7 +1178,7 @@ function Throw({error}) {
11781178
11791179
<ConsoleBlock level="error">
11801180
1181-
경고: root.render(...)에 두 번째 인자를 전달했지만, 이 함수는 하나의 인자만 허용합니다.
1181+
경고: `root.render(...)`에 두 번째 인자를 전달했지만, 이 함수는 하나의 인자만 허용합니다.
11821182
11831183
</ConsoleBlock>
11841184

Diff for: src/content/reference/react-dom/components/form.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ React의 익스텐션인 `<form>`은 현재 React Canary(카나리)와 실험적
3131

3232
### `<form>` {/*form*/}
3333

34-
정보 제출을 위한 대화형 컨트롤을 생성하기 위해, [내장된 브라우저 `<form>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)렌더하세요.
34+
정보 제출을 위한 대화형 컨트롤을 생성하기 위해, [내장된 브라우저 `<form>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)렌더링하세요.
3535

3636
```js
3737
<form action={search}>
@@ -94,7 +94,7 @@ export default function Search() {
9494

9595
### Server Action에서 폼 제출 처리하기 {/*handle-form-submission-with-a-server-action*/}
9696

97-
입력과 제출 버튼과 함께 `<form>`렌더하세요. 폼이 제출될 때 해당 함수를 실행하기 위해 Server Action([`'use server'`](/reference/rsc/use-server)가 표시된 함수)를 폼의 `action`의 프로퍼티로 전달하세요.
97+
입력과 제출 버튼과 함께 `<form>`렌더링하세요. 폼이 제출될 때 해당 함수를 실행하기 위해 Server Action([`'use server'`](/reference/rsc/use-server)가 표시된 함수)를 폼의 `action`의 프로퍼티로 전달하세요.
9898

9999
`<form action>`에 Server Action을 전달하면 자바스크립트가 활성화되기 전이나 코드가 로드되기 전에 사용자가 폼을 제출할 수 있습니다. 이는 연결 상태나 기계가 느리거나 자바스크립트가 비활성화된 사용자에게 유용하고, `action` 프로퍼티에 URL이 전달될 때와 폼이 동작하는 방식은 비슷합니다.
100100

Diff for: src/content/reference/react-dom/components/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ React는 브라우저에 내장된 모든 [HTML](https://developer.mozilla.org/e
4242
* [`<style>`](/reference/react-dom/components/style)
4343
* [`<title>`](/reference/react-dom/components/title)
4444

45-
위의 컴포넌트들은 React 에서 특별하게 다뤄집니다. React 에서는 위의 컴포넌트들을 document head 내부에 렌더하고, 리소스가 로딩 될 동안 일시 중단하고, 각 특정 구성 요소의 참조 페이지에 설명된 다른 동작을 시행합니다.
45+
위의 컴포넌트들은 React 에서 특별하게 다뤄집니다. React 에서는 위의 컴포넌트들을 document head 내부에 렌더링하고, 리소스가 로딩 될 동안 일시 중단하고, 각 특정 구성 요소의 참조 페이지에 설명된 다른 동작을 시행합니다.
4646

4747
---
4848

Diff for: src/content/reference/react-dom/components/script.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default function Page() {
118118

119119
### 인라인 스크립트 렌더링 {/*rendering-an-inline-script*/}
120120

121-
인라인 script 를 포함하려면 render the `<script>` 컴포넌트를 자식으로 스크립트 소스 코드와 함께 렌더링하세요. 인라인 스크립트는 중복 처리되거나 문서 `<head>`로 이동되지 않습니다.
121+
인라인 script 를 포함하려면 `<script>` 컴포넌트를 자식으로 스크립트 소스 코드와 함께 렌더링하세요. 인라인 스크립트는 중복 처리되거나 문서 `<head>`로 이동되지 않습니다.
122122

123123
<SandpackWithHTMLOutput>
124124

Diff for: src/content/reference/react/Children.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -794,7 +794,7 @@ JSX로 자식 요소를 전달할 때와 달리 이런 방식은 각 아이템
794794
795795
---
796796
797-
### render prop로 렌더링 커스텀하기 {/*calling-a-render-prop-to-customize-rendering*/}
797+
### 렌더링 prop로 렌더링 커스텀하기 {/*calling-a-render-prop-to-customize-rendering*/}
798798
799799
모든 개별 항목에 대해 JSX를 생성하는 대신 JSX를 반환하는 함수를 전달하고 필요할 때 해당 함수를 호출할 수도 있습니다. 아래 예시에서 `App` 컴포넌트는 `renderContent` 함수를 `TabSwitcher` 컴포넌트에 전달합니다. `TabSwitcher` 컴포넌트는 선택된 탭에 대해서만 `renderContent`를 호출합니다.
800800
@@ -845,10 +845,10 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
845845
846846
</Sandpack>
847847
848-
`renderContent`와 같이 사용자 인터페이스의 일부를 어떻게 렌더링할지 정의하는 prop를 *render prop*라고 합니다. 하지만 특별한 것은 아닙니다. 단지 일반적인 함수의 prop일 뿐입니다.
848+
`renderContent`와 같이 사용자 인터페이스의 일부를 어떻게 렌더링할지 정의하는 prop를 *렌더링 prop*라고 합니다. 하지만 특별한 것은 아닙니다. 단지 일반적인 함수의 prop일 뿐입니다.
849849
850-
Render props는 함수이므로 정보를 전달할 수 있습니다.
851-
아래 예시에서 `RowList` 컴포넌트는 각 row의 `id``index``renderRow`render prop로 전달하고, `index`가 짝수인 row를 강조합니다.
850+
렌더링 props는 함수이므로 정보를 전달할 수 있습니다.
851+
아래 예시에서 `RowList` 컴포넌트는 각 row의 `id``index``renderRow`렌더링 prop로 전달하고, `index`가 짝수인 row를 강조합니다.
852852
853853
<Sandpack>
854854

Diff for: src/content/reference/react/PureComponent.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class Greeting extends PureComponent {
6262
}
6363
```
6464

65-
리액트 컴포넌트에는 항상 [pure rendering 로직](/learn/keeping-components-pure)이 있어야 합니다. 즉, props, state 및 context가 변경되지 않은 경우 같은 출력을 반환해야 합니다. `PureComponent`를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 리액트에게 알리므로 props 및 state가 변경되지 않는 한 React는 다시 렌더링하지 않습니다. 그러나 사용 중인 context가 변경된다면 컴포넌트는 다시 렌더링 됩니다.
65+
리액트 컴포넌트에는 항상 [순수한 렌더링 로직](/learn/keeping-components-pure)이 있어야 합니다. 즉, props, state 및 context가 변경되지 않은 경우 같은 출력을 반환해야 합니다. `PureComponent`를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 리액트에게 알리므로 props 및 state가 변경되지 않는 한 React는 다시 렌더링하지 않습니다. 그러나 사용 중인 context가 변경된다면 컴포넌트는 다시 렌더링 됩니다.
6666

6767
이 예제에서 `Greeting` 컴포넌트는 `name`이 변경될 때마다 다시 렌더링 되지만 (props 중 하나이기 때문에) `address`가 변경될 때에는 다시 렌더링 되지 않습니다 (`Greeting`에 prop으로 전달되지 않기 때문에).
6868

Diff for: src/content/reference/react/cache.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export function Precipitation({cityData}) {
133133
}
134134
```
135135

136-
위의 예시에서, <CodeStep step={2}>`Precipitation`</CodeStep>와 <CodeStep step={1}>`Temperature`</CodeStep>는 각각 `cache`를 호출하여 자체 캐시 조회를 통해 새로운 메모화된 함수를 만들어 냅니다. 두 컴포넌트가 같은 `cityData`렌더한다면, `calculateWeekReport`를 호출하는 반복 작업을 하게 됩니다.
136+
위의 예시에서, <CodeStep step={2}>`Precipitation`</CodeStep>와 <CodeStep step={1}>`Temperature`</CodeStep>는 각각 `cache`를 호출하여 자체 캐시 조회를 통해 새로운 메모화된 함수를 만들어 냅니다. 두 컴포넌트가 같은 `cityData`렌더링한다면, `calculateWeekReport`를 호출하는 반복 작업을 하게 됩니다.
137137

138138
게다가, `Temperature`는 컴포넌트가 렌더될 때마다 어떤 캐시 공유도 허용하지 않는 <CodeStep step={1}>새로운 메모화된 함수</CodeStep>를 생성하게 됩니다.
139139

@@ -208,7 +208,7 @@ async function AnimatedWeatherCard({city}) {
208208
// ...
209209
}
210210
```
211-
클라이언트 컴포넌트에서 비동기 데이터를 사용하는 컴포넌트를 렌더하고 싶다면 [`use`](/reference/react/use) 문서를 참고하세요.
211+
클라이언트 컴포넌트에서 비동기 데이터를 사용하는 컴포넌트를 렌더링하고 싶다면 [`use`](/reference/react/use) 문서를 참고하세요.
212212

213213
</Note>
214214

Diff for: src/content/reference/react/cloneElement.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -244,9 +244,9 @@ button {
244244
245245
## 대안 {/*alternatives*/}
246246
247-
### render prop으로 데이터를 전달하기 {/*passing-data-with-a-render-prop*/}
247+
### 렌더링 prop으로 데이터를 전달하기 {/*passing-data-with-a-render-prop*/}
248248
249-
`cloneElement`를 사용하는 대신에 `renderItem`과 같은 *render prop*을 사용하는 것을 고려해 보세요. 다음 예제의 `List``renderItem`을 prop으로 받습니다. `List`는 모든 item에 대해 `renderItem`을 호출하고 `isHighlighted`를 인자로 전달합니다.
249+
`cloneElement`를 사용하는 대신에 `renderItem`과 같은 *렌더링 prop*을 사용하는 것을 고려해 보세요. 다음 예제의 `List``renderItem`을 prop으로 받습니다. `List`는 모든 item에 대해 `renderItem`을 호출하고 `isHighlighted`를 인자로 전달합니다.
250250
251251
```js {1,7}
252252
export default function List({ items, renderItem }) {
@@ -259,7 +259,7 @@ export default function List({ items, renderItem }) {
259259
})}
260260
```
261261
262-
`renderItem` prop은 렌더링 방법을 지정하는 prop이기 때문에 "render prop"이라고 불립니다. 예를 들어, 주어진 `isHighlighted` 값으로 `<Row>`를 렌더링하는 `renderItem`을 전달할 수 있습니다.
262+
`renderItem` prop은 렌더링 방법을 지정하는 prop이기 때문에 "렌더링 prop"이라고 불립니다. 예를 들어, 주어진 `isHighlighted` 값으로 `<Row>`를 렌더링하는 `renderItem`을 전달할 수 있습니다.
263263
264264
```js {3,7}
265265
<List

Diff for: src/content/reference/react/forwardRef.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
4949

5050
### `render` 함수 {/*render-function*/}
5151

52-
`forwardRef`는 render 함수를 인수로 받습니다. React는 `props``ref`와 함께 이 함수를 호출합니다.
52+
`forwardRef``render` 함수를 인수로 받습니다. React는 `props``ref`와 함께 이 함수를 호출합니다.
5353

5454
```js
5555
const MyInput = forwardRef(function MyInput(props, ref) {

Diff for: src/content/reference/react/useCallback.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function ProductPage({ productId, referrer, theme }) {
101101
102102
`theme` prop을 토글 하면 앱이 잠시 멈춘다는 것을 알게 되었는데, JSX에서 `<ShippingForm />`을 제거하면 앱이 빨라진 것처럼 느껴집니다. 이것은 `<ShippingForm />` 컴포넌트의 최적화를 시도해 볼 가치가 있다는 것을 나타냅니다.
103103
104-
**기본적으로, 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재랜더링합니다.** 이것이 `ProductPage`가 다른 `theme` 값으로 리렌더링 할 때, `ShippingForm` 컴포넌트 **또한** 리렌더링 하는 이유입니다. 이 것은 리렌더링에 많은 계산을 요구하지 않는 컴포넌트에서는 괜찮습니다. 하지만 리렌더링이 느린 것을 확인한 경우, `ShippingForm`을 [`memo`](/reference/react/memo)로 감싸면 마지막 렌더링과 동일한 props일 때 리렌더링을 건너뛰도록 할 수 있습니다.
104+
**기본적으로, 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재렌더링합니다.** 이것이 `ProductPage`가 다른 `theme` 값으로 리렌더링 할 때, `ShippingForm` 컴포넌트 **또한** 리렌더링 하는 이유입니다. 이 것은 리렌더링에 많은 계산을 요구하지 않는 컴포넌트에서는 괜찮습니다. 하지만 리렌더링이 느린 것을 확인한 경우, `ShippingForm`을 [`memo`](/reference/react/memo)로 감싸면 마지막 렌더링과 동일한 props일 때 리렌더링을 건너뛰도록 할 수 있습니다.
105105
106106
```js {3,5}
107107
import { memo } from 'react';

Diff for: src/content/reference/react/useImperativeHandle.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
3838
3939
#### 매개변수 {/*parameters*/}
4040
41-
* `ref`: [`forwardRef` 렌더 함수](/reference/react/forwardRef#render-function)에서 두 번째 인자로 받은 ref입니다.
41+
* `ref`: [`forwardRef` 렌더링 함수](/reference/react/forwardRef#render-function)에서 두 번째 인자로 받은 ref입니다.
4242
4343
* `createHandle`: 인자가 없고 노출하려는 ref 핸들을 반환하는 함수입니다. 해당 ref 핸들은 어떠한 유형이든 될 수 있습니다. 일반적으로 노출하려는 메서드가 있는 객체를 반환합니다.
4444

0 commit comments

Comments
 (0)