2
2
3
3
## ErrorBoundary
4
4
5
- - 리액트에서 ErrorBoundary는 ` 하위 구성 요소 트리 ` 의 임의의 위치에서 ` JavaScript 에러 ` 를 감지하는 컴포넌트이며, 충돌한 컴포넌트 대신 ` Fallback UI ` 를 표시를 위해 선언적으로 작성할 수 있다 .
6
- - UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시키지 않기 위해 ErrorBoundary를 사용한다 .
5
+ - 리액트에서 ErrorBoundary는 ` 하위 구성 요소 트리 ` 의 임의의 위치에서 ` JavaScript 에러 ` 를 감지하는 컴포넌트이며, 충돌한 컴포넌트 대신 ` Fallback UI ` 를 표시하기 위해 선언적으로 작성할 수 있습니다 .
6
+ - UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시키지 않기 위해 ErrorBoundary를 사용합니다 .
7
7
- 에러 바운더리는 렌더링 중, ` 라이프사이클 메서드 및 하위 컴포넌트 트리의 어디에서든 에러를 탐지합니다. `
8
- - 하지만, ` 초기 렌더링 ` , ` 이벤트 핸들러 내부 오류 ` 나 ` 비동기 코드 ` 에서 오류를 감지하지 않습니다. 오류 경계는 트리에서 아래 구성 요소의 오류만 감지하고 오류 경계 자체의 오류는 감지하지 않습니다.
8
+ - 하지만, ` 초기 렌더링 ` , ` 이벤트 핸들러 내부 오류 ` 나 ` 비동기 코드 ` 에서 오류를 감지하지 않습니다. 오류 경계는 트리에서 아래 구성 요소의 오류만 감지하고, 오류 경계 자체의 오류는 감지하지 않습니다.
9
9
10
10
### 선언형이란?
11
11
12
- - 참고로 프로그래밍 언어에서 선언형이란, ` 결과물에만 집중하고 복잡한 과정을 추상화하는 것을 말한다 . `
13
- - 선언형의 반대의 개념으로 명령형이 있는데 명령형은 결과물보다는 그 과정이 중요하다고 생각하면 된다 .
14
- - 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 ` 추측 ` 해야 한다. 반면에 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 ` 어떤 일이 발생할지 예측이 단숨에 가능하다 . `
12
+ - 프로그래밍 언어에서 선언형은 ` 결과물에만 집중하고 복잡한 과정을 추상화하는 것을 말합니다 . `
13
+ - 선언형 반대의 개념으로 명령형이 있으며, 명령형은 결과물보다는 그 과정이 중요합니다 .
14
+ - 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 ` 추측 ` 해야 합니다. 반면, 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 ` 어떤 일이 발생할지 예측이 가능합니다 . `
15
15
16
16
``` jsx
17
17
// 명령형
@@ -42,8 +42,8 @@ function double(arr) {
42
42
< / QueryErrorBoundary>
43
43
```
44
44
45
- - 리액트 코드를 보고 우리는 에러가 발생하면 DefaultFallback을 보여주는구나 바로 이해할 수가 있다 .
46
- - QueryErrorBoundary가 내부에서 어떤 로직이 동작하는지 우리는 신경쓰지 않아도된다 . 이처럼 ` 내부 복잡성을 추상화 ` 하는게 바로 선언형이다 .
45
+ - 리액트 코드를 보고 우리는 에러가 발생하면 DefaultFallback을 보여주는구나 바로 이해할 수 있습니다 .
46
+ - QueryErrorBoundary가 내부에서 어떤 로직이 동작하는지 우리는 신경 쓰지 않아도 됩니다 . 이처럼 ` 내부 복잡성을 추상화 ` 하는 것이 바로 선언형입니다 .
47
47
48
48
<br />
49
49
@@ -57,7 +57,7 @@ class ErrorBoundary extends React.Component {
57
57
}
58
58
59
59
static getDerivedStateFromError (error ) {
60
- // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다 .
60
+ // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트합니다 .
61
61
return { hasError: true };
62
62
}
63
63
@@ -77,13 +77,13 @@ class ErrorBoundary extends React.Component {
77
77
}
78
78
```
79
79
80
- - 위에 코드는 리액트 공식문서에서 제공해주는 기본 ErrorBoundary 코드이다 .
81
- - 생명주기 메서드인 getDerivedStateFromError()와 ComponentDidCatch()중 하나(혹은 둘 다)를 정의하면 에러 경계가 된다 .
82
- - 에러 발생한 뒤에 폴백 UI 렌더링을 하려면 ` static getDerivedStateFromError ` 를 사용
80
+ - 위에 코드는 리액트 공식 문서에서 제공해 주는 기본 ErrorBoundary 코드입니다 .
81
+ - 생명주기 메서드인 ` getDerivedStateFromError() ` 와 ` ComponentDidCatch() ` 중 하나(혹은 둘 다)를 정의하면 에러 경계가 됩니다 .
82
+ - 에러 발생한 뒤에 폴백 UI 렌더링을 하려면 ` static getDerivedStateFromError ` 를 사용합니다.
83
83
- 해당 생명주기 메서드는 ` 하위의 자손 컴포넌트 ` 에서 오류가 발생했을 때 호출됩니다. 이 메서드는 매개변수로 오류를 전달받고, ` 갱신된 state 값을 반드시 반환 ` 해야 합니다.
84
- - 에러 정보를 기록하려면 ` componentDidCatch ` 를 사용
85
- - 생명주기 메서드는 자손 컴포넌트에서 오류가 발생했을 때에 호출되며, 2개의 매개변수를 전달받습니다.
86
- - error - 발생한 오류, info - 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 포함한 componentStack 키를 갖고있는 객체
84
+ - 에러 정보를 기록하려면 ` componentDidCatch ` 를 사용합니다.
85
+ - 생명주기 메서드는 자손 컴포넌트에서 오류가 발생했을 때 호출되며, 2개의 매개변수를 전달받습니다.
86
+ - error - 발생한 오류, info - 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 포함한 componentStack 키를 갖고 있는 객체
87
87
- 에러 바운더리는 ` **트리 내에서 하위에 존재하는 컴포넌트의 에러만을 포착** ` 합니다
88
88
- 에러 경계의 각 위젯을 에러 경계로 감싸서 애플리케이션의 나머지 부분이 충돌하지 않도록 보호할 수도 있습니다.
89
89
0 commit comments