From 1e9f6e4d88d5de09c2b9707b429cfc4118d88904 Mon Sep 17 00:00:00 2001 From: jjamming Date: Sun, 19 Apr 2026 17:35:33 +0900 Subject: [PATCH 1/3] docs: unify optional parameter labels in react reference (#1478) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace **optional**, **선택사항**, **선택 사항**, **(선택사항)**, **(선택적)** label variants with the agreed `identifier`**(선택사항)** form per issue #1478. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/content/reference/react/Children.md | 4 ++-- src/content/reference/react/Component.md | 4 ++-- src/content/reference/react/Fragment.md | 4 ++-- src/content/reference/react/ViewTransition.md | 20 +++++++++---------- src/content/reference/react/cloneElement.md | 2 +- src/content/reference/react/createElement.md | 2 +- src/content/reference/react/memo.md | 2 +- src/content/reference/react/useActionState.md | 2 +- src/content/reference/react/useDebugValue.md | 2 +- .../reference/react/useDeferredValue.md | 2 +- src/content/reference/react/useEffect.md | 2 +- .../reference/react/useImperativeHandle.md | 2 +- .../reference/react/useInsertionEffect.md | 2 +- .../reference/react/useLayoutEffect.md | 4 ++-- src/content/reference/react/useReducer.md | 2 +- .../reference/react/useSyncExternalStore.md | 2 +- 16 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 470b75c69..5d06e44f8 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -84,7 +84,7 @@ function SeparatorList({ children }) { * `children`: 컴포넌트에서 받은 [`children` Prop](/learn/passing-props-to-a-component#passing-jsx-as-children)의 값. * `fn`: [배열의`forEach` 메서드](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 콜백처럼 각 자식 요소에서 실행할 함수. 자식 요소를 첫 번째 인수로, 인덱스를 두 번째 인수로 받습니다. 인덱스는 0에서 시작해서 호출할 때마다 증가합니다. -* **optional** `thisArg`: `fn` 함수가 호출될 때 사용될 [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)의 값. 생략 시 `undefined`로 간주합니다. +* `thisArg`**(선택사항)**: `fn` 함수가 호출될 때 사용될 [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)의 값. 생략 시 `undefined`로 간주합니다. #### 반환값 {/*children-foreach-returns*/} @@ -122,7 +122,7 @@ function RowList({ children }) { * `children`: 컴포넌트에서 받은 [`children` Prop](/learn/passing-props-to-a-component#passing-jsx-as-children)의 값. * `fn`: [베열의 `map` 메서드](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 콜백같은 매핑 함수. 자식 요소를 첫 번째 인수로, 인덱스를 두 번째 인수로 받습니다. 인덱스는 0에서 시작해서 호출할 때마다 증가합니다. 함수는 빈 노드(`null`, `undefined` 혹은 Boolean), 문자열, 숫자, React 엘리먼트 혹은 다른 React 노드의 배열과 같은 React 노드를 반환해야 합니다. -* **optional** `thisArg`: `fn` 함수가 호출될 때 사용될 [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)의 값. 생략시 `undefined`로 간주합니다. +* `thisArg`**(선택사항)**: `fn` 함수가 호출될 때 사용될 [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)의 값. 생략시 `undefined`로 간주합니다. #### 반환값 {/*children-map-returns*/} diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 06ed05c06..521c3fbc4 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -464,7 +464,7 @@ class ChatRoom extends Component { #### 매개변수 {/*forceupdate-parameters*/} -* **optional** `callback`: 지정한 경우 React는 업데이트가 커밋된 후 사용자가 제공한 `callback`을 호출합니다. +* `callback`**(선택사항)**: 지정한 경우 React는 업데이트가 커밋된 후 사용자가 제공한 `callback`을 호출합니다. #### 반환값 {/*forceupdate-returns*/} @@ -655,7 +655,7 @@ function handleClick() { * 객체를 `nextState`로 전달하면 `this.state`에 얕게(shallowly) 병합됩니다. * 함수를 `nextState`로 전달하면 _업데이터 함수_ 로 취급됩니다. 이 함수는 순수해야 하고, pending state와 props를 인자로 받아야 하며, `this.state`에 얕게(shallowly) 병합할 객체를 반환해야 합니다. React는 업데이터 함수를 큐에 넣고 컴포넌트를 다시 렌더링합니다. 다음 렌더링 중에 React는 큐에 있는 모든 업데이터를 이전 state에 적용하여 다음 state를 계산합니다. -* **optional** `callback`: 지정한 경우 React는 업데이트가 커밋된 후 사용자가 제공한 `callback`을 호출합니다. +* `callback`**(선택사항)**: 지정한 경우 React는 업데이트가 커밋된 후 사용자가 제공한 `callback`을 호출합니다. #### 반환값 {/*setstate-returns*/} diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 48b3ee2e9..88aa3e9a1 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -28,9 +28,9 @@ title: (<>...) 하나의 엘리먼트가 필요한 상황에서 엘리먼트를 ``로 감싸서 그룹화하세요. `Fragment` 안에서 그룹화된 엘리먼트는 DOM 결과물에 영향을 주지 않습니다. 즉, 엘리먼트가 그룹화되지 않은 것과 같습니다. 대부분의 경우 빈 JSX 태그인 `<>`는 ``의 축약형입니다. #### Props {/*props*/} -- **optional** `key`: 명시적 ``로 선언된 `Fragment`에는 [`key`](/learn/rendering-lists#keeping-list-items-in-order-with-key)를 사용할 수 있습니다. +- `key`**(선택사항)**: 명시적 ``로 선언된 `Fragment`에는 [`key`](/learn/rendering-lists#keeping-list-items-in-order-with-key)를 사용할 수 있습니다. -- **optional** `ref`: ref 객체(예: [`useRef`](/reference/react/useRef)에서 반환된 것) 또는 [콜백 함수](/reference/react-dom/components/common#ref-callback)입니다. React는 `Fragment`로 감싼 DOM 노드와 상호작용하기 위한 메서드를 구현한 `FragmentInstance`를 ref 값으로 제공합니다. +- `ref`**(선택사항)**: ref 객체(예: [`useRef`](/reference/react/useRef)에서 반환된 것) 또는 [콜백 함수](/reference/react-dom/components/common#ref-callback)입니다. React는 `Fragment`로 감싼 DOM 노드와 상호작용하기 위한 메서드를 구현한 `FragmentInstance`를 ref 값으로 제공합니다. ### FragmentInstance {/*fragmentinstance*/} diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index 30dc0403d..c4b6ae84e 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -75,21 +75,21 @@ React는 내부적으로 `startViewTransition`을 자체적으로 호출하므 기본적으로 ``은 부드러운 크로스 페이드로 애니메이션됩니다. 이러한 프로퍼티로 애니메이션을 커스터마이즈하거나 공유 엘리먼트 Transition을 지정할 수 있습니다. -* **optional** `enter`: 문자열 또는 객체. "enter"가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. -* **optional** `exit`: 문자열 또는 객체. "exit"이 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. -* **optional** `update`: 문자열 또는 객체. "update"가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. -* **optional** `share`: 문자열 또는 객체. 공유 엘리먼트가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. -* **optional** `default`: 문자열 또는 객체. 다른 일치하는 활성화 프로퍼티가 없을 때 사용되는 [View Transition 클래스](#view-transition-class)입니다. -* **optional** `name`: 문자열 또는 객체. 공유 엘리먼트 transition에 사용되는 View Transition의 이름입니다. 제공되지 않으면 React는 예상치 못한 애니메이션을 방지하기 위해 각 View Transition에 대해 고유한 이름을 사용합니다. +* `enter`**(선택사항)**: 문자열 또는 객체. "enter"가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. +* `exit`**(선택사항)**: 문자열 또는 객체. "exit"이 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. +* `update`**(선택사항)**: 문자열 또는 객체. "update"가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. +* `share`**(선택사항)**: 문자열 또는 객체. 공유 엘리먼트가 활성화될 때 적용할 [View Transition 클래스](#view-transition-class)입니다. +* `default`**(선택사항)**: 문자열 또는 객체. 다른 일치하는 활성화 프로퍼티가 없을 때 사용되는 [View Transition 클래스](#view-transition-class)입니다. +* `name`**(선택사항)**: 문자열 또는 객체. 공유 엘리먼트 transition에 사용되는 View Transition의 이름입니다. 제공되지 않으면 React는 예상치 못한 애니메이션을 방지하기 위해 각 View Transition에 대해 고유한 이름을 사용합니다. #### 콜백 {/*events*/} 이 콜백을 사용하면 [animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) API를 사용하여 애니메이션을 명령적으로 조정할 수 있습니다. -* **optional** `onEnter`: 함수. React는 "enter" 애니메이션 후에 `onEnter`를 호출합니다. -* **optional** `onExit`: 함수. React는 "exit" 애니메이션 후에 `onExit`를 호출합니다. -* **optional** `onShare`: 함수. React는 "share" 애니메이션 후에 `onShare`를 호출합니다. -* **optional** `onUpdate`: 함수. React는 "update" 애니메이션 후에 `onUpdate`를 호출합니다. +* `onEnter`**(선택사항)**: 함수. React는 "enter" 애니메이션 후에 `onEnter`를 호출합니다. +* `onExit`**(선택사항)**: 함수. React는 "exit" 애니메이션 후에 `onExit`를 호출합니다. +* `onShare`**(선택사항)**: 함수. React는 "share" 애니메이션 후에 `onShare`를 호출합니다. +* `onUpdate`**(선택사항)**: 함수. React는 "update" 애니메이션 후에 `onUpdate`를 호출합니다. 각 콜백은 다음을 인수로 받습니다. - `element`: 애니메이션된 DOM 엘리먼트입니다. diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 12625577b..74452db62 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -51,7 +51,7 @@ console.log(clonedElement); // Goodbye * `props`: `props` 인자는 객체 또는 `null`이어야 합니다. `null`을 전달하면 복제된 엘리먼트는 원본 `element.props`를 모두 유지합니다. 그렇지 않으면 `props` 객체의 각 prop에 대해 반환된 엘리먼트는 `element.props`의 값보다 `props`의 값을 "우선"합니다. 나머지 `props`는 원본 `element.props`에서 채워집니다. `props.key` 또는 `props.ref`를 전달하면 원본의 것을 대체합니다. -* **(선택사항)** `...children`: 0개 이상의 자식 노드가 필요합니다. React 엘리먼트, 문자열, 숫자, [portals](/reference/react-dom/createPortal), 빈 노드 (`null`, `undefined`, `true`, `false`) 및 React 노드 배열을 포함한 모든 React 노드가 해당할 수 있습니다. `...children` 인자를 전달하지 않으면 원본 `element.props.children`이 유지됩니다. +* `...children`**(선택사항)**: 0개 이상의 자식 노드가 필요합니다. React 엘리먼트, 문자열, 숫자, [portals](/reference/react-dom/createPortal), 빈 노드 (`null`, `undefined`, `true`, `false`) 및 React 노드 배열을 포함한 모든 React 노드가 해당할 수 있습니다. `...children` 인자를 전달하지 않으면 원본 `element.props.children`이 유지됩니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/createElement.md b/src/content/reference/react/createElement.md index 594101b1c..99cba1549 100644 --- a/src/content/reference/react/createElement.md +++ b/src/content/reference/react/createElement.md @@ -42,7 +42,7 @@ function Greeting({ name }) { * `props`: `props` 인수는 객체 또는 `null`이어야 합니다. `null`을 전달하면 빈 객체와 동일하게 처리됩니다. React는 전달한 `props`와 일치하는 프로퍼티를 가진 엘리먼트를 생성합니다. 전달한 `props` 객체의 `ref`와 `key`는 특수하기 때문에 생성한 `element`에서 `element.props.ref` 와 `element.props.key`는 사용할 수 *없다*는 점에 유의하세요. `element.ref` 또는 `element.key`로 사용할 수 있습니다. -* **선택사항** `...children`: 0개 이상의 자식 노드. React 엘리먼트, 문자열, 숫자, [포탈](/reference/react-dom/createPortal), 빈 노드(`null`, `undefined`, `true`, `false`) 그리고 React 노드 배열을 포함한 모든 React 노드가 될 수 있습니다. +* `...children`**(선택사항)**: 0개 이상의 자식 노드. React 엘리먼트, 문자열, 숫자, [포탈](/reference/react-dom/createPortal), 빈 노드(`null`, `undefined`, `true`, `false`) 그리고 React 노드 배열을 포함한 모든 React 노드가 될 수 있습니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 515fc48e4..8faf6a72d 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -42,7 +42,7 @@ const SomeComponent = memo(function SomeComponent(props) { * `Component`: 메모Memoize하려는 컴포넌트입니다. `memo`는 이 컴포넌트를 수정하지 않고 대신 새로운 메모된 컴포넌트를 반환합니다. 함수와 [`forwardRef`](/reference/react/forwardRef) 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용됩니다. -* **optional** `arePropsEqual`: 컴포넌트의 이전 Props와 새로운 Props의 두 가지 인수를 받는 함수입니다. 이전 Props와 새로운 Props가 동일한 경우, 컴포넌트가 이전 Props와 동일한 결과를 렌더링하고 새로운 Props에서도 이전 Props와 동일한 방식으로 동작하는 경우 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다. 일반적으로 이 함수를 지정하지 않습니다. React는 기본적으로 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)로 각 Props를 비교합니다. +* `arePropsEqual`**(선택사항)**: 컴포넌트의 이전 Props와 새로운 Props의 두 가지 인수를 받는 함수입니다. 이전 Props와 새로운 Props가 동일한 경우, 컴포넌트가 이전 Props와 동일한 결과를 렌더링하고 새로운 Props에서도 이전 Props와 동일한 방식으로 동작하는 경우 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다. 일반적으로 이 함수를 지정하지 않습니다. React는 기본적으로 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)로 각 Props를 비교합니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index ae518b398..50218eb67 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -48,7 +48,7 @@ function StatefulForm({}) { * `fn`: 폼이 제출되거나 버튼이 눌렸을 때 호출되는 함수입니다. 함수가 호출되면 첫 번째 인수로 폼의 이전 State(처음에는 전달한 `initialState`, 이후에는 이전 반환값)가 전달되고, 그 뒤로는 폼 액션이 일반적으로 받는 인수들이 전달됩니다. * `initialState`: State가 처음에 가지기를 원하는 값입니다. 이는 직렬화 가능한 값이면 무엇이든 될 수 있습니다. 이 인수는 액션이 처음 호출된 후에는 무시됩니다. -* **optional** `permalink`: 이 폼이 수정하는 고유한 페이지 URL을 포함하는 문자열입니다. 동적 콘텐츠가 있는 페이지(예: 피드)에서 점진적 향상Progressive Enhancement과 함께 사용됩니다. 만약 `fn`이 [서버 함수](/reference/rsc/server-functions)이고, 폼이 자바스크립트 번들이 로드되기 전에 제출되면, 브라우저는 현재 페이지의 URL 대신 지정된 영구 링크Permalink URL로 이동합니다. React가 State를 전달하는 방법을 알 수 있도록, 동일한 폼 컴포넌트가 대상 페이지에 렌더링되도록 해야 합니다. (동일한 액션 `fn`과 `permalink` 포함.) 폼이 하이드레이션된 후, 이 매개변수는 더 이상 효과가 없습니다. +* `permalink`**(선택사항)**: 이 폼이 수정하는 고유한 페이지 URL을 포함하는 문자열입니다. 동적 콘텐츠가 있는 페이지(예: 피드)에서 점진적 향상Progressive Enhancement과 함께 사용됩니다. 만약 `fn`이 [서버 함수](/reference/rsc/server-functions)이고, 폼이 자바스크립트 번들이 로드되기 전에 제출되면, 브라우저는 현재 페이지의 URL 대신 지정된 영구 링크Permalink URL로 이동합니다. React가 State를 전달하는 방법을 알 수 있도록, 동일한 폼 컴포넌트가 대상 페이지에 렌더링되도록 해야 합니다. (동일한 액션 `fn`과 `permalink` 포함.) 폼이 하이드레이션된 후, 이 매개변수는 더 이상 효과가 없습니다. {/* TODO T164397693: link to serializable values docs once it exists */} diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index fbfc8a4d5..f4423d65a 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -37,7 +37,7 @@ function useOnlineStatus() { #### 매개변수 {/*parameters*/} * `value`: React DevTools에 표시하고 싶은 값입니다. 어떤 타입이든 될 수 있습니다. -* **선택사항** `format`: 포맷팅 함수입니다. 컴포넌트가 검사될 때, React DevTools는 `value`를 인자로 포맷팅 함수를 호출하고, 포맷팅 함수가 반환한 포맷팅 된 값을 표시합니다. (포맷팅 된 값은 어떤 타입이든 될 수 있습니다.) 포맷팅 함수를 지정하지 않으면, 원래의 `value`가 표시됩니다. +* `format`**(선택사항)**: 포맷팅 함수입니다. 컴포넌트가 검사될 때, React DevTools는 `value`를 인자로 포맷팅 함수를 호출하고, 포맷팅 함수가 반환한 포맷팅 된 값을 표시합니다. (포맷팅 된 값은 어떤 타입이든 될 수 있습니다.) 포맷팅 함수를 지정하지 않으면, 원래의 `value`가 표시됩니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index 0e22e9e19..b7c328d8b 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -37,7 +37,7 @@ function SearchPage() { #### 매개변수 {/*parameters*/} * `value`: 지연시키려는 값입니다. 모든 타입을 가질 수 있습니다. -* **선택사항** `initialValue`: 컴포넌트 초기 렌더링 시 사용할 값입니다. 이 옵션을 생략하면 초기 렌더링 동안 `useDeferredValue`는 값을 지연시키지 않습니다. 이는 대신 렌더링할 `value`의 이전 버전이 없기 때문입니다. +* `initialValue`**(선택사항)**: 컴포넌트 초기 렌더링 시 사용할 값입니다. 이 옵션을 생략하면 초기 렌더링 동안 `useDeferredValue`는 값을 지연시키지 않습니다. 이는 대신 렌더링할 `value`의 이전 버전이 없기 때문입니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 3529646b3..57e69e41e 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -46,7 +46,7 @@ function ChatRoom({ roomId }) { + `setup(설정)`: Effect의 로직이 포함된 함수입니다. 설정 함수는 선택적으로 *clean up(정리)* 함수를 반환할 수 있습니다. React는 컴포넌트가 DOM에 추가된 이후에 설정 함수를 실행합니다. 의존성의 변화에 따라 컴포넌트가 리렌더링이 되었을 경우, (설정 함수에 정리 함수를 추가했었다면) React는 이전 렌더링에 사용된 값으로 정리 함수를 실행한 후 새로운 값으로 설정 함수를 실행합니다. 컴포넌트가 DOM에서 제거된 경우에도 정리 함수를 실행합니다. -+ `dependencies` **선택사항** : `설정` 함수의 코드 내부에서 참조되는 모든 반응형 값들이 포함된 배열로 구성됩니다. 반응형 값에는 props와 state, 모든 변수 및 컴포넌트 body에 직접적으로 선언된 함수들이 포함됩니다. 린터가 [React 환경에 맞게 설정되어 있을 경우](/learn/editor-setup#linting), 린터는 모든 반응형 값들이 의존성에 제대로 명시되어 있는지 검증할 것입니다. 의존성 배열은 항상 일정한 수의 항목을 가지고 있어야 하며 `[dep1, dep2, dep3]`과 같이 작성되어야 합니다. React는 각각의 의존성들을 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교법을 통해 이전 값과 비교합니다. 의존성을 생략할 경우, Effect는 컴포넌트가 리렌더링될 때마다 실행됩니다. [인수에 의존성 배열을 추가했을 때, 빈 배열을 추가했을 때, 의존성을 추가하지 않았을 때의 차이를 확인해 보세요.](#examples-dependencies) ++ `dependencies`**(선택사항)**: `설정` 함수의 코드 내부에서 참조되는 모든 반응형 값들이 포함된 배열로 구성됩니다. 반응형 값에는 props와 state, 모든 변수 및 컴포넌트 body에 직접적으로 선언된 함수들이 포함됩니다. 린터가 [React 환경에 맞게 설정되어 있을 경우](/learn/editor-setup#linting), 린터는 모든 반응형 값들이 의존성에 제대로 명시되어 있는지 검증할 것입니다. 의존성 배열은 항상 일정한 수의 항목을 가지고 있어야 하며 `[dep1, dep2, dep3]`과 같이 작성되어야 합니다. React는 각각의 의존성들을 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교법을 통해 이전 값과 비교합니다. 의존성을 생략할 경우, Effect는 컴포넌트가 리렌더링될 때마다 실행됩니다. [인수에 의존성 배열을 추가했을 때, 빈 배열을 추가했을 때, 의존성을 추가하지 않았을 때의 차이를 확인해 보세요.](#examples-dependencies) #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index a05b9b64d..8e42447fd 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -42,7 +42,7 @@ function MyInput({ ref }) { * `createHandle`: 인수가 없고 노출하려는 Ref 핸들을 반환하는 함수입니다. 해당 Ref 핸들은 어떠한 유형이든 될 수 있습니다. 일반적으로 노출하려는 메서드가 있는 객체를 반환합니다. -* **(선택적)** `dependencies`: `createHandle` 코드 내에서 참조하는 모든 반응형 값을 나열한 목록입니다. 반응형 값은 Props, State 및 컴포넌트 내에서 직접 선언한 모든 변수와 함수를 포함합니다. [React에 대한 린터Linter를 구성한 경우](/learn/editor-setup#linting), 모든 반응형 값이 올바르게 의존성으로 지정되었는지 확인합니다. 의존성 목록은 항상 일정한 수의 항목을 가지고 `[dep1, dep2, dep3]`와 같이 인라인으로 작성되어야 합니다. React는 각 의존성을 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 사용하여 이전 값과 비교합니다. 리렌더링으로 인해 일부 의존성이 변경되거나, 이 인수를 생략한 경우 `createHandle` 함수가 다시 실행되고 새로 생성된 핸들이 Ref에 할당됩니다. +* `dependencies`**(선택사항)**: `createHandle` 코드 내에서 참조하는 모든 반응형 값을 나열한 목록입니다. 반응형 값은 Props, State 및 컴포넌트 내에서 직접 선언한 모든 변수와 함수를 포함합니다. [React에 대한 린터Linter를 구성한 경우](/learn/editor-setup#linting), 모든 반응형 값이 올바르게 의존성으로 지정되었는지 확인합니다. 의존성 목록은 항상 일정한 수의 항목을 가지고 `[dep1, dep2, dep3]`와 같이 인라인으로 작성되어야 합니다. React는 각 의존성을 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 사용하여 이전 값과 비교합니다. 리렌더링으로 인해 일부 의존성이 변경되거나, 이 인수를 생략한 경우 `createHandle` 함수가 다시 실행되고 새로 생성된 핸들이 Ref에 할당됩니다. diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 985892383..657216132 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -46,7 +46,7 @@ function useCSS(rule) { * `setup`: Effects 의 로직이 포함된 함수입니다. setup 함수는 선택적으로 *cleanup* 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 추가되기 전에, layout Effects 가 실행되기 전에, React는 setup 함수를 실행합니다. `dependencies`가 변경되어 다시 렌더링할 때마다, React는 먼저 이전 값으로 cleanup 함수(제공한 경우)를 실행한 다음 새 값으로 setup 함수를 실행합니다. 컴포넌트가 DOM에서 제거되기 전에 React는 cleanup 함수를 한 번 더 실행합니다. -* **선택사항** `dependencies`: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다. +* `dependencies`**(선택사항)**: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index fc5c50a4f..0221f4e65 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -50,9 +50,9 @@ function Tooltip() { * `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your [component commits](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom), React will run your setup function. After every commit with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function. -* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` 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. If you omit this argument, your Effect will re-run after every commit of the component. +* `dependencies`**(선택사항)**: The list of all reactive values referenced inside of the `setup` 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. If you omit this argument, your Effect will re-run after every commit of the component. -* **선택사항** `dependencies`: `setup`코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다. +* `dependencies`**(선택사항)**: `setup`코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index 71c3b3ee9..7e7dea631 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -40,7 +40,7 @@ function MyComponent() { * `reducer`: state가 어떻게 업데이트 되는지 지정하는 Reducer 함수입니다. Reducer 함수는 반드시 순수 함수여야 하며, State와 Action을 인수로 받아야 하고, 다음 State를 반환해야 합니다. State와 Action에는 모든 데이터 타입이 할당될 수 있습니다. * `initialArg`: 초기 State가 계산되는 값입니다. 모든 데이터 타입이 할당될 수 있습니다. 초기 State가 어떻게 계산되는지는 다음 `init` 인수에 따라 달라집니다. -* **선택사항** `init`: 초기 State를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 State는 `initialArg`로 설정됩니다. 할당되었다면 초기 State는 `init(initialArg)`를 호출한 결과가 할당됩니다. +* `init`**(선택사항)**: 초기 State를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 State는 `initialArg`로 설정됩니다. 할당되었다면 초기 State는 `init(initialArg)`를 호출한 결과가 할당됩니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index af36c0fbf..05dd7e921 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -44,7 +44,7 @@ store에 있는 데이터의 스냅샷을 반환합니다. 두 개의 함수를 * `getSnapshot`: 컴포넌트에 필요한 store 데이터의 스냅샷을 반환하는 함수입니다. store가 변경되지 않은 상태에서 `getSnapshot`을 반복적으로 호출하면 동일한 값을 반환해야 합니다. 저장소가 변경되어 반환된 값이 다르면 ([`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)와 비교하여) React는 컴포넌트를 리렌더링합니다. -* **optional** `getServerSnapshot`: store에 있는 데이터의 초기 스냅샷을 반환하는 함수입니다. 서버 렌더링 도중과 클라이언트에서 서버 렌더링 된 콘텐츠의 하이드레이션 중에만 사용됩니다. 서버 스냅샷은 클라이언트와 서버 간에 동일해야 하며 일반적으로 직렬화되어 서버에서 클라이언트로 전달됩니다. 이 함수가 제공되지 않으면 서버에서 컴포넌트를 렌더링할 때 오류가 발생합니다. +* `getServerSnapshot`**(선택사항)**: store에 있는 데이터의 초기 스냅샷을 반환하는 함수입니다. 서버 렌더링 도중과 클라이언트에서 서버 렌더링 된 콘텐츠의 하이드레이션 중에만 사용됩니다. 서버 스냅샷은 클라이언트와 서버 간에 동일해야 하며 일반적으로 직렬화되어 서버에서 클라이언트로 전달됩니다. 이 함수가 제공되지 않으면 서버에서 컴포넌트를 렌더링할 때 오류가 발생합니다. #### 반환값 {/*returns*/} From 93f8745069a4219a1ceeb8a17c1ac6848bef3d14 Mon Sep 17 00:00:00 2001 From: jjamming Date: Sun, 19 Apr 2026 17:37:37 +0900 Subject: [PATCH 2/3] docs: unify optional parameter labels in react-dom reference (#1478) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace **optional**, **선택 사항** label variants with the agreed `identifier`**(선택사항)** form per issue #1478. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../reference/react-dom/client/createRoot.md | 10 ++++---- .../reference/react-dom/client/hydrateRoot.md | 10 ++++---- .../reference/react-dom/components/common.md | 2 +- .../server/renderToPipeableStream.md | 24 +++++++++---------- .../server/renderToReadableStream.md | 20 ++++++++-------- .../react-dom/server/renderToStaticMarkup.md | 4 ++-- .../react-dom/server/renderToString.md | 4 ++-- .../reference/react-dom/server/resume.md | 8 +++---- .../server/resumeToPipeableStream.md | 12 +++++----- .../reference/react-dom/static/prerender.md | 18 +++++++------- .../react-dom/static/prerenderToNodeStream.md | 18 +++++++------- .../react-dom/static/resumeAndPrerender.md | 6 ++--- .../static/resumeAndPrerenderToNodeStream.md | 6 ++--- 13 files changed, 71 insertions(+), 71 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 1fb463b3a..8f144ff1d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -42,11 +42,11 @@ root.render(); * `domNode`: [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element). React는 DOM 엘리먼트에 대한 루트를 생성하고 렌더링된 React 콘텐츠를 표시하는 `render`와 같은 함수를 루트에서 호출할 수 있도록 합니다. -* **optional** `options`: React 루트에 대한 옵션을 가진 객체입니다. - * **optional** `onCaughtError`: React가 Error Boundary에서 오류를 잡을 때 호출되는 콜백. Error Boundary에서 잡은 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. - * **optional** `onUncaughtError`: 오류가 Error Boundary에 의해 잡히지 않을 때 호출되는 콜백. 오류가 발생한 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. - * **optional** `onRecoverableError`: React가 오류로부터 자동으로 복구될 때 호출되는 콜백. React가 던지는 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. 복구 가능한 오류는 원본 오류 원인을 `error.cause`로 포함할 수 있습니다. - * **optional** `identifierPrefix`: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. +* `options`**(선택사항)**: React 루트에 대한 옵션을 가진 객체입니다. + * `onCaughtError`**(선택사항)**: React가 Error Boundary에서 오류를 잡을 때 호출되는 콜백. Error Boundary에서 잡은 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. + * `onUncaughtError`**(선택사항)**: 오류가 Error Boundary에 의해 잡히지 않을 때 호출되는 콜백. 오류가 발생한 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. + * `onRecoverableError`**(선택사항)**: React가 오류로부터 자동으로 복구될 때 호출되는 콜백. React가 던지는 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. 복구 가능한 오류는 원본 오류 원인을 `error.cause`로 포함할 수 있습니다. + * `identifierPrefix`**(선택사항)**: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 04960b31b..f6e20a974 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -39,11 +39,11 @@ React는 `domNode` 내부에 존재하는 HTML에 연결되어, 그 내부의 DO * `reactNode`: 기존 HTML에 렌더링하기 위한 "React 노드" 입니다. 주로 `ReactDOM Server`의 `renderToPipeableStream()`와 같은 메서드로 렌더링된 ``과 같은 JSX 조각들입니다. -* **optional** `options`: React 루트에 대한 옵션을 가진 객체입니다. - * **optional** `onCaughtError`: React가 Error Boundary에서 오류를 잡았을 때 호출되는 콜백입니다. Error Boundary에서 잡은 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. - * **optional** `onUncaughtError`: 오류가 Error Boundary에 의해 잡히지 않았을 때 호출되는 콜백입니다. 발생한 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. - * **optional** `onRecoverableError`: React가 오류로부터 자동으로 복구될 때 호출되는 콜백입니. React가 던지는 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. 복구 가능한 오류는 원본 오류 원인을 `error.cause`로 포함할 수 있습니다. - * **optional** `identifierPrefix`: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. 서버에서 사용한 값과 반드시 동일한 값이어야 합니다. +* `options`**(선택사항)**: React 루트에 대한 옵션을 가진 객체입니다. + * `onCaughtError`**(선택사항)**: React가 Error Boundary에서 오류를 잡았을 때 호출되는 콜백입니다. Error Boundary에서 잡은 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. + * `onUncaughtError`**(선택사항)**: 오류가 Error Boundary에 의해 잡히지 않았을 때 호출되는 콜백입니다. 발생한 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. + * `onRecoverableError`**(선택사항)**: React가 오류로부터 자동으로 복구될 때 호출되는 콜백입니. React가 던지는 `error`와 `componentStack`을 포함하는 `errorInfo` 객체와 함께 호출됩니다. 복구 가능한 오류는 원본 오류 원인을 `error.cause`로 포함할 수 있습니다. + * `identifierPrefix`**(선택사항)**: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. 서버에서 사용한 값과 반드시 동일한 값이어야 합니다. #### 반환값 {/*returns*/} diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 34c37a17b..0ceb161aa 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -275,7 +275,7 @@ React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합 #### 반환값 {/*returns*/} -* **optional** `Cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. +* `Cleanup 함수`**(선택사항)**: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. #### 주의 사항 {/*caveats*/} diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 5890c48a3..8ddf7ce85 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -48,18 +48,18 @@ const { pipe } = renderToPipeableStream(, { * `reactNode`: HTML로 렌더링하려는 React 노드. 예를 들어, ``과 같은 JSX 엘리먼트입니다. 전체 문서를 나타낼 것으로 예상되므로 `App` 컴포넌트는 `` 태그를 렌더링해야 합니다. -* **선택 사항** `options`: 스트리밍 옵션이 있는 객체입니다. - * **선택 사항** `bootstrapScriptContent`: 지정하면 이 문자열이 인라인 `