diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index e739367c9..96f5a27de 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -992,7 +992,7 @@ React는 세 번째 렌더링에서의 `['travel']`와 두 번째 렌더링에 #### 마운트시 input 필드에 포커스하기 {/*focus-a-field-on-mount*/} -이 예시에서는 form이 `` 컴포넌트를 렌더링합니다. +이 예시에서는 폼이 `` 컴포넌트를 렌더링합니다. 화면에 나타날 때 `MyInput`이 자동으로 포커스되도록 입력의 [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) 메서드를 사용하세요. 이미 주석 처리된 구현이 있지만 제대로 작동하지 않습니다. 왜 작동하지 않는지 확인하고 수정해 보세요. (`autoFocus` 속성은 존재하지 않는 것으로 가정하세요. 우리는 처음부터 동일한 기능을 다시 구현하고 있습니다.) @@ -1158,7 +1158,7 @@ body { #### 조건부로 input 필드에 포커스하기 {/*focus-a-field-conditionally*/} -이 form은 두 개의 `` 컴포넌트를 렌더링합니다. +이 폼은 두 개의 `` 컴포넌트를 렌더링합니다. "form 보기"를 누르면 두 번째 필드가 자동으로 포커스됩니다. 이는 두 `` 컴포넌트 모두 내부의 필드에 포커스를 주려고 하기 때문입니다. 두 개의 입력 필드에 연속해서 `focus()`를 호출하면 마지막 호출이 항상 "승리하게" 됩니다. @@ -1242,7 +1242,7 @@ body { -해당 코드를 실행하고 주어진 검증 방법을 따라 진행해 봅시다. "form 보기" 버튼을 반복적으로 누르고 "form 숨기기" 버튼을 클릭하여 결과를 확인할 수 있습니다. form이 나타날 때, *첫 번째* 입력 필드에만 포커스가 설정됩니다. 부모 컴포넌트가 첫 번째 입력 필드를 `shouldFocus={true}`로 렌더링하고 두 번째 입력 필드를 `shouldFocus={false}`로 렌더링하기 때문입니다. 또한 두 입력 필드 모두 정상적으로 작동하며, 둘 다 텍스트를 입력할 수 있습니다. +해당 코드를 실행하고 주어진 검증 방법을 따라 진행해 봅시다. "form 보기" 버튼을 반복적으로 누르고 "form 숨기기" 버튼을 클릭하여 결과를 확인할 수 있습니다. 폼이 나타날 때, *첫 번째* 입력 필드에만 포커스가 설정됩니다. 부모 컴포넌트가 첫 번째 입력 필드를 `shouldFocus={true}`로 렌더링하고 두 번째 입력 필드를 `shouldFocus={false}`로 렌더링하기 때문입니다. 또한 두 입력 필드 모두 정상적으로 작동하며, 둘 다 텍스트를 입력할 수 있습니다. @@ -1337,9 +1337,9 @@ body { #### 두 번 실행되는 interval 고치기 {/*fix-an-interval-that-fires-twice*/} -아래 'Counter' 컴포넌트는 매 초마다 증가하는 카운터를 나타냅니다. 컴포넌트가 마운트될 때 [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)을 호출합니다. 이로 인해 'onTick' 함수가 매 초마다 실행됩니다. 'onTick' 함수는 카운터를 증가시킵니다. +아래 `Counter` 컴포넌트는 매 초마다 증가하는 카운터를 나타냅니다. 컴포넌트가 마운트될 때 [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)을 호출합니다. 이로 인해 `onTick` 함수가 매 초마다 실행됩니다. `onTick` 함수는 카운터를 증가시킵니다. -하지만 1초마다 한 번씩 증가하는 대신 두 번씩 증가합니다. 왜 그럴까요? 버그의 원인을 찾아 수정하세요 +하지만 1초마다 한 번씩 증가하는 대신 두 번씩 증가합니다. 왜 그럴까요? 버그의 원인을 찾아 수정하세요. diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index 6ac6b975a..542088246 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -4,7 +4,7 @@ title: "" -[`` 브라우저 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) 를 사용하면 여러 종류의 form input 을 렌더링 할 수 있습니다. +[`` 브라우저 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) 를 사용하면 여러 종류의 폼 input 을 렌더링 할 수 있습니다. ```js diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 5322fa226..1a0c7426c 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -156,7 +156,7 @@ console.timeEnd('filter array'); **실제로 몇 가지 원칙을 지키면 많은 메모이제이션을 불필요하게 만들 수 있습니다.** 1. 컴포넌트가 다른 컴포넌트를 시각적으로 감쌀 때 [JSX를 자식처럼 받아들이도록 하세요.](/learn/passing-props-to-a-component#passing-jsx-as-children) 이렇게 하면 감싸는 구성 요소가 자신의 상태를 업데이트하더라도 React는 자식을 다시 렌더링할 필요가 없습니다. -1. 지역 상태를 선호하고 필요 이상으로 [상태를 위로 올리지](/learn/sharing-state-between-components) 마세요. 예를 들어, forms와 같이 일시적인 상태나 어떤 항목이 트리의 맨 위에 위치하거나, 전역 상태 라이브러리에 있게 하지 마세요. +1. 지역 상태를 선호하고 필요 이상으로 [상태를 위로 올리지](/learn/sharing-state-between-components) 마세요. 예를 들어, 폼과 같이 일시적인 상태나 어떤 항목이 트리의 맨 위에 위치하거나, 전역 상태 라이브러리에 있게 하지 마세요. 1. [순수한 렌더링 로직](/learn/keeping-components-pure)을 유지하세요. 컴포넌트를 다시 렌더링할 때 문제가 발생하거나 눈에 띄는 시각적인 부작용이 발생하면 컴포넌트에 버그가 있는 것입니다! 메모이제이션을 하는 대신 버그를 수정하세요. 1. [상태를 업데이트하는 불필요한 Effect](/learn/you-might-not-need-an-effect)를 피하세요. React 앱의 대부분의 성능 문제는 컴포넌트를 반복적으로 렌더링하게 만드는 Effect의 업데이트 체인으로부터 발생합니다. 1. [Effects에서 불필요한 종속성을 제거하세요.](/learn/removing-effect-dependencies) 예를 들어, 메모이제이션을 하는 대신 일부 객체나 함수를 Effect 내부 또는 컴포넌트 외부로 이동하는 것이 더 간단할 때가 있습니다. diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 8a7f04141..7f44d401c 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -441,7 +441,7 @@ setForm({ #### 폼 (객체) {/*form-object*/} -이 예시에서 `form` state 변수는 객체를 받습니다. 각 input에는 전체 form의 다음 state로 `setForm`을 호출하는 change 핸들러가 있습니다. 전개 구문인 `{ ...form }`은 state 객체를 변경하지 않고 교체합니다. +이 예시에서 `form` state 변수는 객체를 받습니다. 각 input에는 전체 `form`의 다음 state로 `setForm`을 호출하는 change 핸들러가 있습니다. 전개 구문인 `{ ...form }`은 state 객체를 변경하지 않고 교체합니다. diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index ae3cd391f..835df3dea 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -140,9 +140,9 @@ function UpdateName() { ### Server Actions를 사용한 폼 액션 {/*form-actions-with-server-actions*/} -Server Actions는 React 19의 새로운 Form 기능과 함께 작동합니다. +Server Actions는 React 19의 새로운 폼 기능과 함께 작동합니다. -Server Action을 Form에 전달하여 폼을 서버에 자동으로 제출할 수 있습니다. +Server Action을 폼에 전달하여 폼을 서버에 자동으로 제출할 수 있습니다. ```js [[1, 3, "updateName"], [1, 7, "updateName"]] @@ -159,7 +159,7 @@ function UpdateName() { } ``` -Form 제출이 성공하면, React는 자동으로 폼을 재설정합니다. 보류 상태, 마지막 응답에 액세스하거나 점진적인 향상을 지원하기 위해 `useActionState`를 추가할 수 있습니다. +폼 제출이 성공하면, React는 자동으로 폼을 재설정합니다. 보류 상태, 마지막 응답에 액세스하거나 점진적인 향상을 지원하기 위해 `useActionState`를 추가할 수 있습니다. 자세한 내용은 [Server Actions 형식](/reference/rsc/use-server#server-actions-in-forms) 문서를 참조하세요. diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md index 0a3b5759b..dfcb8c7db 100644 --- a/src/content/reference/rsc/use-server.md +++ b/src/content/reference/rsc/use-server.md @@ -98,7 +98,7 @@ Server Action에서 중요한 데이터를 전송하지 않도록 하기 위해, ### Server Action 형식 {/*server-actions-in-forms*/} -Server Action의 가장 일반적인 사용 사례는, 데이터를 변경하는 Server 함수를 호출하는 것입니다. 브라우저에서 [HTML form 엘리먼트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form)는 사용자가 mutation을 제출하는 전통적인 접근 방식입니다. React 서버 컴포넌트로, React는 [forms](/reference/react-dom/components/form)에서 Server Action에 대한 최상의 지원을 제공합니다. +Server Action의 가장 일반적인 사용 사례는, 데이터를 변경하는 서버 함수를 호출하는 것입니다. 브라우저에서 [HTML 폼 엘리먼트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form)는 사용자가 mutation을 제출하는 전통적인 접근 방식입니다. React 서버 컴포넌트로, React는 [forms](/reference/react-dom/components/form)에서 Server Action에 대한 최상의 지원을 제공합니다. 사용자가 사용자 이름을 요청할 수 있는 양식이 있습니다. @@ -121,12 +121,12 @@ export default function App() { } ``` -예시에서 `requestUsername`는 `
`을 통한 Server Action입니다. 사용자가 이 양식을 제출하면 서버 함수인 `requestUsername`에 네트워크 요청이 있습니다. form에서 Server Action을 호출할 때 React는 form의 [FormData](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 Server Action의 첫 번째 인자로 제공합니다. +예시에서 `requestUsername`는 ``을 통한 Server Action입니다. 사용자가 이 양식을 제출하면 서버 함수인 `requestUsername`에 네트워크 요청이 있습니다. 폼에서 Server Action을 호출할 때 React는 폼의 [FormData](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 Server Action의 첫 번째 인자로 제공합니다. -Server Action을 form `action`에 전달하여, React는 form을 [점진적 향상](https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)할 수 있습니다. 이것은 자바스크립트 번들이 로드되기 전에 양식을 제출할 수 있다는 것을 의미합니다. +Server Action을 폼 `action`에 전달하여, React는 폼을 [점진적 향상](https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)할 수 있습니다. 이것은 자바스크립트 번들이 로드되기 전에 양식을 제출할 수 있다는 것을 의미합니다. -#### form에서 반환 값 처리 {/*handling-return-values*/} +#### 폼에서 반환 값 처리 {/*handling-return-values*/} 점진적 향상을 지원하며 Server Action의 결과를 기반으로 UI를 업데이트하려면, [`useActionState`](/reference/react/useActionState)를 사용하세요. @@ -172,7 +172,7 @@ function UsernameForm() { Server Action은 노출된 서버 엔드포인트이며 클라이언트 코드 어디에서나 호출할 수 있습니다. -[form](/reference/react-dom/components/form) 외부에서 Server Action을 사용할 때, [Transition](/reference/react/useTransition)에서 서버 액션을 호출하면 로딩 인디케이터를 표시하고, [낙관적 상태 업데이트](/reference/react/useOptimistic)를 표시하며 예기치 않은 오류를 처리할 수 있습니다. Form은 transition의 Server Action을 자동으로 래핑합니다. +[form](/reference/react-dom/components/form) 외부에서 Server Action을 사용할 때, [Transition](/reference/react/useTransition)에서 서버 액션을 호출하면 로딩 인디케이터를 표시하고, [낙관적 상태 업데이트](/reference/react/useOptimistic)를 표시하며 예기치 않은 오류를 처리할 수 있습니다. 폼은 transition의 Server Action을 자동으로 래핑합니다. ```js {9-12} import incrementLike from './actions';