Translate: Component #681

HojinAn · 2023-05-31T15:59:40Z

Progress

번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

hg-pyun · 2023-06-02T01:01:52Z

src/content/reference/react/Component.md

@@ -1928,7 +1927,7 @@ export default function MyApp() {

 </Sandpack>

-When you convert them to function components, replace `this.context` with [`useContext`](/reference/react/useContext) calls:
+함수 컴포넌트로 변환할 때는 `this.context`를 [`useContext`](/reference/react/useContext) 호출로 바꾸세요.


Suggested change

함수 컴포넌트로 변환할 때는 `this.context`를 [`useContext`](/reference/react/useContext) 호출로 바꾸세요.

함수 컴포넌트로 변환할 때는 `this.context`를 [`useContext`](/reference/react/useContext) 호출로 바꿔주세요.

hg-pyun · 2023-06-02T01:04:21Z

src/content/reference/react/Component.md


-Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an *error boundary.*
+일반적으로, 에러에 대한 응답으로 state를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)와 함께 사용됩니다. 이런 여러 메서드를 사용하는 컴포넌트를 *오차 경계*라고 합니다.


에러 바운더리는 고유명사에 가깝기 때문에 번역하지 않는 편이 좋을 것 같습니다.

Suggested change

일반적으로, 에러에 대한 응답으로 state를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)와 함께 사용됩니다. 이런 여러 메서드를 사용하는 컴포넌트를 *오차 경계*라고 합니다.

일반적으로, 에러에 대한 응답으로 state를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)와 함께 사용됩니다. 이런 여러 메서드를 사용하는 컴포넌트를 *error boundary*라고 합니다.

hg-pyun · 2023-06-02T01:04:51Z

src/content/reference/react/Component.md


-`componentDidCatch` should not return anything.
+`componentDidCatch`는 아무것도 반환해서는 안 됩니다.


Suggested change

`componentDidCatch`는 아무것도 반환해서는 안 됩니다.

`componentDidCatch`는 아무것도 반환하면 안 됩니다.

HojinAn

@hg-pyun 리뷰 주신 내용 모두 반영했습니다! 꼼꼼히 봐주셔서 감사합니다 ㅎㅎ

MaxKim-J · 2023-06-04T09:15:31Z

src/content/reference/react/Component.md

@@ -97,9 +97,9 @@ class Greeting extends Component {

 <Note>

-Reading `this.props` in class components is equivalent to [declaring props](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component) in function components.
+클래스 컴포넌트에서 `this.props`를 읽는 것은 함수 컴포넌트에서 [props를 선언하는 것](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component)와 같습니다.


Suggested change

클래스 컴포넌트에서 `this.props`를 읽는 것은 함수 컴포넌트에서 [props를 선언하는 것](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component)와 같습니다.

클래스 컴포넌트에서 `this.props`를 읽는 것은 함수 컴포넌트에서 [props를 선언하는 것](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component)과 같습니다.

MaxKim-J · 2023-06-04T09:22:13Z

src/content/reference/react/Component.md


-* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+* `error`: 발생한 에러입니다. 실제로, 보통은 [`에러`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만 JavaScript에서 문자열 또는 `null`을 포함한 어떤 값이든 [`던질`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 수 있기 때문에 보장되지 않습니다.


throw는 예약어인만큼 번역하지 않아도 뜻이 통할 것 같습니다.

Suggested change

* `error`: 발생한 에러입니다. 실제로, 보통은 [`에러`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만 JavaScript에서 문자열 또는 `null`을 포함한 어떤 값이든 [`던질`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 수 있기 때문에 보장되지 않습니다.

* `error`: 발생한 에러입니다. 실제로, 보통은 [`에러`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만 JavaScript에서 문자열 또는 `null`을 포함한 어떤 값이든 [`throw`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw)할 수 있기 때문에 보장되지 않습니다.

MaxKim-J · 2023-06-04T09:24:22Z

src/content/reference/react/Component.md


-* `info`: An object containing additional information about the error. Its `componentStack` field contains a stack trace with the component that threw, as well as the names and source locations of all its parent components. In production, the component names will be minified. If you set up production error reporting, you can decode the component stack using sourcemaps the same way as you would do for regular JavaScript error stacks.
+* `info`: 에러에 대한 추가 정보를 포함하는 객체입니다. 이것의 `componentStack` 필드는 모든 부모 컴포넌트의 이름과 출처 위치뿐만 아니라 던진 컴포넌트의 스택 추적을 포함합니다. 프로덕션에서, 컴포넌트의 이름은 최소화됩니다. 프로덕션 에러 보고를 설정하면 일반 JavaScript 에러 스택과 동일한 방법으로 소스맵을 사용하여 컴포넌트 스택을 디코딩할 수 있습니다.


위 코멘트와 같은 맥락으로, 개발에서 사용하는 용어는 번역하지 않아도 뜻이 통할 것 같습니다.

Suggested change

* `info`: 에러에 대한 추가 정보를 포함하는 객체입니다. 이것의 `componentStack` 필드는 모든 부모 컴포넌트의 이름과 출처 위치뿐만 아니라 던진 컴포넌트의 스택 추적을 포함합니다. 프로덕션에서, 컴포넌트의 이름은 최소화됩니다. 프로덕션 에러 보고를 설정하면 일반 JavaScript 에러 스택과 동일한 방법으로 소스맵을 사용하여 컴포넌트 스택을 디코딩할 수 있습니다.

* `info`: 에러에 대한 추가 정보를 포함하는 객체입니다. 이것의 `componentStack` 필드는 모든 부모 컴포넌트의 이름과 출처 위치뿐만 아니라 에러를 throw한 컴포넌트의 stack trace를 포함합니다. 프로덕션에서, 컴포넌트의 이름은 최소화됩니다. 프로덕션 에러 보고를 설정하면 일반 JavaScript 에러 스택과 동일한 방법으로 소스맵을 사용하여 컴포넌트 스택을 디코딩할 수 있습니다.

MaxKim-J · 2023-06-04T09:29:13Z

src/content/reference/react/Component.md


-* Production and development builds of React slightly differ in the way `componentDidCatch` handles errors. In development, the errors will bubble up to `window`, which means that any `window.onerror` or `window.addEventListener('error', callback)` will intercept the errors that have been caught by `componentDidCatch`. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by `componentDidCatch`.
+* React의 프로덕션과 개발 빌드는 `componentDidCatch`가 에러를 처리하는 방식이 약간 다릅니다. 개발에서는, 에러는 `window`까지 버블업될 것이며, 이는 `window.onerror` 또는 `window.addEventListener('error', callback)`가 `componentDidCatch`에 의해 탐지된 에러를 가로챈다는 것을 의미합니다. 대신 프로덕션에서, 에러는 버블업되지 않을 것이며, 이는 어떤 상위 에러 처리기든 `componentDidCatch`에 의해 명시적으로 탐지되지 않은 에러만을 수신하는 것을 의미합니다.


일반적으로 이벤트 처리와 관련된 용어를 사용할때의 용례로 바꿔 번역하면 좋을 것 같습니다. "처리기" 라는 표현 역시 개발에서 사용하는 용어는 번역하지 않아도 뜻이 통할 것 같습니다.

Suggested change

* React의 프로덕션과 개발 빌드는 `componentDidCatch`가 에러를 처리하는 방식이 약간 다릅니다. 개발에서는, 에러는 `window`까지 버블업될 것이며, 이는 `window.onerror` 또는 `window.addEventListener('error', callback)`가 `componentDidCatch`에 의해 탐지된 에러를 가로챈다는 것을 의미합니다. 대신 프로덕션에서, 에러는 버블업되지 않을 것이며, 이는 어떤 상위 에러 처리기든 `componentDidCatch`에 의해 명시적으로 탐지되지 않은 에러만을 수신하는 것을 의미합니다.

* React의 프로덕션과 개발 빌드는 `componentDidCatch`가 에러를 처리하는 방식이 약간 다릅니다. 개발에서는, 에러는 `window`까지 버블링될 것이며, 이는 `window.onerror` 또는 `window.addEventListener('error', callback)`가 `componentDidCatch`에 의해 탐지된 에러를 가로챈다는 것을 의미합니다. 대신 프로덕션에서, 에러는 버블링되지 않을 것이며, 이는 상위의 에러 핸들러가 `componentDidCatch`에 의해 명시적으로 탐지되지 않은 에러만을 수신하는 것을 의미합니다.

MaxKim-J · 2023-06-04T09:44:42Z

src/content/reference/react/Component.md


 </Note>

 ---

 ### `UNSAFE_componentWillUpdate(nextProps, nextState)` {/*unsafe_componentwillupdate*/}

+`UNSAFE_componentWillUpdate`를 정의하면 React는 새 props나 state로 렌더링하기 전에 이를 호출합니다. 이 메서드는 역사적인 이유로만 존재하며 새로운 코드에서 사용하면 안 됩니다. 대신 다른 대안을 사용하세요.


원문과 개행을 맞춰주시면 좋을 것 같습니다

MaxKim-J · 2023-06-04T09:45:47Z

src/content/reference/react/Component.md


- It's not supported to call [`setState`](#setstate) (or any method that leads to `setState` being called, like dispatching a Redux action) during `componentWillUpdate`.
+- 이름과는 달리, 앱이 [`Suspense`](/reference/react/Suspense)와 같은 최신 React 기능을 사용하는 경우 `UNSAFE_componentWillUpdate`가 컴포넌트가 업데이트*할 것*을 보장하지는 않습니다. 렌더링 시도가 일시 중단되면(예를 들어 일부 하위 컴포넌트의 코드가 아직 로드되지 않았기 때문에) React는 진행 중인 트리를 버리고 다음 시도에서 컴포넌트를 처음부터 새로 구성하려고 시도합니다. 다음 렌더링 시도 시에는 props와 state가 달라질 수 있습니다. 이것이 바로 이 메서드가 "안전하지 않은" 이유입니다. 커밋된 업데이트에 대해서만 실행되어야 하는 코드(예: 구독 재설정)는 [`componentDidUpdate`](#componentdidupdate)로 이동해야 합니다.


피동 표현이 조금 더 어울리며, 같은 조사(가) 연달아 두 번 나오는 것이 조금 어색합니다.

Suggested change

- 이름과는 달리, 앱이 [`Suspense`](/reference/react/Suspense)와 같은 최신 React 기능을 사용하는 경우 `UNSAFE_componentWillUpdate`가 컴포넌트가 업데이트*할 것*을 보장하지는 않습니다. 렌더링 시도가 일시 중단되면(예를 들어 일부 하위 컴포넌트의 코드가 아직 로드되지 않았기 때문에) React는 진행 중인 트리를 버리고 다음 시도에서 컴포넌트를 처음부터 새로 구성하려고 시도합니다. 다음 렌더링 시도 시에는 props와 state가 달라질 수 있습니다. 이것이 바로 이 메서드가 "안전하지 않은" 이유입니다. 커밋된 업데이트에 대해서만 실행되어야 하는 코드(예: 구독 재설정)는 [`componentDidUpdate`](#componentdidupdate)로 이동해야 합니다.

- 이름과는 달리, 앱이 [`Suspense`](/reference/react/Suspense)와 같은 최신 React 기능을 사용하는 경우 `UNSAFE_componentWillUpdate`는 컴포넌트가 업데이트*될 것*을 보장하지는 않습니다. 렌더링 시도가 일시 중단되면(예를 들어 일부 하위 컴포넌트의 코드가 아직 로드되지 않았기 때문에) React는 진행 중인 트리를 버리고 다음 시도에서 컴포넌트를 처음부터 새로 구성하려고 시도합니다. 다음 렌더링 시도 시에는 props와 state가 달라질 수 있습니다. 이것이 바로 이 메서드가 "안전하지 않은" 이유입니다. 커밋된 업데이트에 대해서만 실행되어야 하는 코드(예: 구독 재설정)는 [`componentDidUpdate`](#componentdidupdate)로 이동해야 합니다.

MaxKim-J · 2023-06-04T09:47:42Z

src/content/reference/react/Component.md


-* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+* `error`: 던져진 오류입니다. 실제로는 일반적으로 [`Error`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만, 자바스크립트에서는 문자열이나 심지어 `null`을 포함한 모든 값을 [`throw`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 할 수 있으므로 보장되지는 않습니다.


위 코멘트와 같습니다

Suggested change

* `error`: 던져진 오류입니다. 실제로는 일반적으로 [`Error`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만, 자바스크립트에서는 문자열이나 심지어 `null`을 포함한 모든 값을 [`throw`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 할 수 있으므로 보장되지는 않습니다.

* `error`: throw된 에러입니다. 실제로는 일반적으로 [`Error`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만, 자바스크립트에서는 문자열이나 심지어 `null`을 포함한 모든 값을 [`throw`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 할 수 있으므로 보장되지는 않습니다.

MaxKim-J · 2023-06-04T09:49:16Z

src/content/reference/react/Component.md

- If you want to **"reset" some state when a prop changes,** consider either making a component [fully controlled](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a key](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
+- props 변경에 대한 응답으로 부수 효과(예: 데이터 불러오기 또는 애니메이션)를 수행해야 하는 경우, 대신 [`componentDidUpdate`](#componentdidupdate) 메서드를 사용하세요.
+- **props이 변경될 때만 일부 데이터를 다시 계산**하려면 [memoization helper를 대신 사용하세요.](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization)
+- **prop이 변경될 때 일부 state를 "초기화"** 하려면 컴포넌트를 [완전히 제어](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component)하거나 [key로 완전히 제어하지 않도록](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) 만드는 것이 좋습니다.


문장이 약간 중의적이어서 명확히 번역하면 좋을 것 같습니다.

Suggested change

- **prop이 변경될 때 일부 state를 "초기화"** 하려면 컴포넌트를 [완전히 제어](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component)하거나 [key로 완전히 제어하지 않도록](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) 만드는 것이 좋습니다.

- **prop이 변경될 때 일부 state를 "초기화"** 하려면 컴포넌트를 [완전히 제어](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component)하거나 [key를 사용해 완전히 제어하지 않도록](https://ko.legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) 만드는 것이 좋습니다.

HojinAn · 2023-06-04T15:59:21Z

@MaxKim-J 꼼꼼히 봐주신 내용 모두 반영했습니다! 감사합니다 ㅎㅎ

github-actions · 2023-06-05T04:59:42Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

MaxKim-J

내용이 길었는데 고생하셨습니다 👍🏻

docs: draft Component translation

7c54729

HojinAn requested review from hg-pyun, taehwanno, simsim0709, gnujoow, b9words, taggon, MaxKim-J, eomttt and goofcode as code owners May 31, 2023 15:59

vercel bot deployed to Preview – ko-react-dev May 31, 2023 16:00 View deployment

docs: fix class wrong translation

a117d5d

vercel bot deployed to Preview – ko-react-dev May 31, 2023 16:19 View deployment

docs: fix state(wrong), place(not appropriate) translation

89cb61e

vercel bot deployed to Preview – ko-react-dev May 31, 2023 16:26 View deployment

HojinAn changed the title ~~docs: draft Component translation~~ Translate: Component Jun 1, 2023

hg-pyun requested changes Jun 2, 2023

View reviewed changes

docs: improve translation phrases

9477284

HojinAn requested a review from hg-pyun June 2, 2023 15:15

vercel bot deployed to Preview – ko-react-dev June 2, 2023 15:15 View deployment

HojinAn commented Jun 2, 2023

View reviewed changes

gnujoow added the needs review label Jun 3, 2023

MaxKim-J reviewed Jun 4, 2023

View reviewed changes

docs: improve translation phrases 2nd

f48c175

HojinAn requested a review from MaxKim-J June 4, 2023 15:57

vercel bot deployed to Preview – ko-react-dev June 4, 2023 15:57 View deployment

Merge branch 'main' into Component

6530f35

vercel bot deployed to Preview – ko-react-dev June 4, 2023 16:01 View deployment

eomttt added ready to merge and removed needs review labels Jun 5, 2023

Merge branch 'main' into Component

e133de8

vercel bot deployed to Preview – ko-react-dev June 5, 2023 06:40 View deployment

MaxKim-J approved these changes Jun 6, 2023

View reviewed changes

hg-pyun approved these changes Jun 6, 2023

View reviewed changes

hg-pyun merged commit 5429db7 into reactjs:main Jun 6, 2023

sa02045 mentioned this pull request Jul 4, 2023

용어: Suspense #705

Closed

1 task

	함수 컴포넌트로 변환할 때는 `this.context`를 [`useContext`](/reference/react/useContext) 호출로 바꾸세요.
	함수 컴포넌트로 변환할 때는 `this.context`를 [`useContext`](/reference/react/useContext) 호출로 바꿔주세요.


		Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an error boundary.
		일반적으로, 에러에 대한 응답으로 state를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)와 함께 사용됩니다. 이런 여러 메서드를 사용하는 컴포넌트를 오차 경계라고 합니다.


		`componentDidCatch` should not return anything.
		`componentDidCatch`는 아무것도 반환해서는 안 됩니다.

	`componentDidCatch`는 아무것도 반환해서는 안 됩니다.
	`componentDidCatch`는 아무것도 반환하면 안 됩니다.

	클래스 컴포넌트에서 `this.props`를 읽는 것은 함수 컴포넌트에서 [props를 선언하는 것](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component)와 같습니다.
	클래스 컴포넌트에서 `this.props`를 읽는 것은 함수 컴포넌트에서 [props를 선언하는 것](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component)과 같습니다.


		* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
		* `error`: 발생한 에러입니다. 실제로, 보통은 [`에러`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만 JavaScript에서 문자열 또는 `null`을 포함한 어떤 값이든 [`던질`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 수 있기 때문에 보장되지 않습니다.


		* `info`: An object containing additional information about the error. Its `componentStack` field contains a stack trace with the component that threw, as well as the names and source locations of all its parent components. In production, the component names will be minified. If you set up production error reporting, you can decode the component stack using sourcemaps the same way as you would do for regular JavaScript error stacks.
		* `info`: 에러에 대한 추가 정보를 포함하는 객체입니다. 이것의 `componentStack` 필드는 모든 부모 컴포넌트의 이름과 출처 위치뿐만 아니라 던진 컴포넌트의 스택 추적을 포함합니다. 프로덕션에서, 컴포넌트의 이름은 최소화됩니다. 프로덕션 에러 보고를 설정하면 일반 JavaScript 에러 스택과 동일한 방법으로 소스맵을 사용하여 컴포넌트 스택을 디코딩할 수 있습니다.


		* Production and development builds of React slightly differ in the way `componentDidCatch` handles errors. In development, the errors will bubble up to `window`, which means that any `window.onerror` or `window.addEventListener('error', callback)` will intercept the errors that have been caught by `componentDidCatch`. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by `componentDidCatch`.
		* React의 프로덕션과 개발 빌드는 `componentDidCatch`가 에러를 처리하는 방식이 약간 다릅니다. 개발에서는, 에러는 `window`까지 버블업될 것이며, 이는 `window.onerror` 또는 `window.addEventListener('error', callback)`가 `componentDidCatch`에 의해 탐지된 에러를 가로챈다는 것을 의미합니다. 대신 프로덕션에서, 에러는 버블업되지 않을 것이며, 이는 어떤 상위 에러 처리기든 `componentDidCatch`에 의해 명시적으로 탐지되지 않은 에러만을 수신하는 것을 의미합니다.


		- It's not supported to call [`setState`](#setstate) (or any method that leads to `setState` being called, like dispatching a Redux action) during `componentWillUpdate`.
		- 이름과는 달리, 앱이 [`Suspense`](/reference/react/Suspense)와 같은 최신 React 기능을 사용하는 경우 `UNSAFE_componentWillUpdate`가 컴포넌트가 업데이트할 것을 보장하지는 않습니다. 렌더링 시도가 일시 중단되면(예를 들어 일부 하위 컴포넌트의 코드가 아직 로드되지 않았기 때문에) React는 진행 중인 트리를 버리고 다음 시도에서 컴포넌트를 처음부터 새로 구성하려고 시도합니다. 다음 렌더링 시도 시에는 props와 state가 달라질 수 있습니다. 이것이 바로 이 메서드가 "안전하지 않은" 이유입니다. 커밋된 업데이트에 대해서만 실행되어야 하는 코드(예: 구독 재설정)는 [`componentDidUpdate`](#componentdidupdate)로 이동해야 합니다.


		* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
		* `error`: 던져진 오류입니다. 실제로는 일반적으로 [`Error`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)의 인스턴스가 되지만, 자바스크립트에서는 문자열이나 심지어 `null`을 포함한 모든 값을 [`throw`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw) 할 수 있으므로 보장되지는 않습니다.

Uh oh!

Translate: Component #681

Translate: Component #681

Uh oh!

Conversation

HojinAn commented May 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Progress

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HojinAn left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HojinAn commented Jun 4, 2023

Uh oh!

github-actions bot commented Jun 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes

📦 Next.js Bundle Analysis for react-dev

Uh oh!

MaxKim-J left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HojinAn commented May 31, 2023 •

edited

Loading

HojinAn left a comment •

edited

Loading

github-actions bot commented Jun 5, 2023 •

edited

Loading