You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
***[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React.
75
+
***[DevExtreme Reactive](https://devexpress.github.io/devextreme-reactive/react/)** High-performance plugin-based Data Grid, Scheduler and Chart components for Bootstrap and Material Design.
***[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components.
-[Chrome에서 접근성 검사기를 사용하는 방법](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)
464
464
-[OS X Safari에서 접근성 검사기를 사용하는 방법](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
Copy file name to clipboardExpand all lines: content/docs/hooks-faq.md
+6-2
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ Starting with 16.8.0, React includes a stable implementation of React Hooks for:
70
70
71
71
Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM.
72
72
73
-
React Native will fully support Hooks in its next stable release.
73
+
React Native 0.59 and above support Hooks.
74
74
75
75
### Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components}
76
76
@@ -675,7 +675,9 @@ function Counter() {
675
675
}
676
676
```
677
677
678
-
Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state:
678
+
The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1.
679
+
680
+
Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state:
679
681
680
682
```js{6,9}
681
683
function Counter() {
@@ -694,6 +696,8 @@ function Counter() {
694
696
695
697
(The identity of the `setCount` function is guaranteed to be stable so it's safe to omit.)
696
698
699
+
Now, the `setInterval` callback executes once a second, but each time the inner call to `setCount` can use an up-to-date value for `count` (called `c` in the callback here.)
700
+
697
701
In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props.
698
702
699
703
As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example:
Copy file name to clipboardExpand all lines: content/docs/typechecking-with-proptypes.md
+24-21
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ redirect_from:
10
10
>
11
11
> `React.PropTypes`는 React v15.5부터 다른 패키지로 이동하였습니다. 대신 [`prop-types` 라이브러리를](https://www.npmjs.com/package/prop-types) 사용하시길 바랍니다.
12
12
>
13
-
> 우리는 변환을 자동화하기 위하여 [codemod 스크립트를](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) 제공하고 있습니다.
13
+
> 우리는 변환을 자동화하기 위하여 [codemod 스크립트를](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) 제공하고 있습니다.
14
14
15
15
당신의 앱이 커짐에 따라 타입 확인을 통하면 많은 버그를(bug) 잡을 수 있습니다. 특정 애플리케이션에서는 전체 애플리케이션의 타입 확인을 위하여 [Flow](https://flow.org/) 또는 [TypeScript](https://www.typescriptlang.org/)와 같은 JavaScript 도구(Extensions)를 사용할 수 있습니다. 당신이 이러한 것들을 사용하지 않더라도 React는 내장된 타입 확인 기능들을 가지고 있습니다. 컴포넌트의 props에 타입 확인을 하려면 다음과 같이 특별한 프로퍼티인 propTypes를 선언할 수 있습니다.
16
16
@@ -30,7 +30,7 @@ Greeting.propTypes = {
30
30
};
31
31
```
32
32
33
-
`PropTypes`는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기(Validator)를 내보냅니다. 아래 예시에서는 `PropTypes.string`을 사용하게 될 것입니다. prop에 유효하지 않은 값이 전달 되었을 때, 경고문이 JavaScript 콘솔을 통해 보일 것입니다. `propTypes`는 성능상의 이유로 개발 모드(Development mode) 에서만 확인될 것입니다.
33
+
`PropTypes`는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기(Validator)를 내보냅니다. 아래 예시에서는 `PropTypes.string`을 사용하게 될 것입니다. prop에 유효하지 않은 값이 전달 되었을 때, 경고문이 JavaScript 콘솔을 통해 보일 것입니다. `propTypes`는 성능상의 이유로 개발 모드(Development mode) 에서만 확인될 것입니다.
34
34
35
35
### PropTypes {#proptypes}
36
36
@@ -40,8 +40,8 @@ Greeting.propTypes = {
40
40
importPropTypesfrom'prop-types';
41
41
42
42
MyComponent.propTypes= {
43
-
// prop가 특정 JS 형식임을 선언할 수 있습니다.
44
-
// 이것들은 기본적으로 모두 선택 사항입니다.
43
+
// prop가 특정 JS 형식임을 선언할 수 있습니다.
44
+
// 이것들은 기본적으로 모두 선택 사항입니다.
45
45
optionalArray:PropTypes.array,
46
46
optionalBool:PropTypes.bool,
47
47
optionalFunc:PropTypes.func,
@@ -57,11 +57,14 @@ MyComponent.propTypes = {
57
57
// React 엘리먼트.
58
58
optionalElement:PropTypes.element,
59
59
60
-
// prop가 클래스의 인스턴스임을 선언할 수 있습니다.
61
-
// 이 경우 JS's instanceof 연산자를 사용합니다.
60
+
// React 엘리먼트 타입 (ie. MyComponent)
61
+
optionalElementType:PropTypes.elementType,
62
+
63
+
// prop가 클래스의 인스턴스임을 선언할 수 있습니다.
64
+
// 이 경우 JS's instanceof 연산자를 사용합니다.
62
65
optionalMessage:PropTypes.instanceOf(Message),
63
66
64
-
// 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
67
+
// 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
65
68
optionalEnum:PropTypes.oneOf(['News', 'Photos']),
66
69
67
70
// 여러 종류중 하나의 종류가 될 수 있는 객체
@@ -82,22 +85,22 @@ MyComponent.propTypes = {
82
85
color:PropTypes.string,
83
86
fontSize:PropTypes.number
84
87
}),
85
-
88
+
86
89
// An object with warnings on extra properties
87
90
optionalObjectWithStrictShape:PropTypes.exact({
88
91
name:PropTypes.string,
89
92
quantity:PropTypes.number
90
-
}),
93
+
}),
91
94
92
95
// 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
93
-
// 경고가 보이도록 할 수 있습니다.
96
+
// 경고가 보이도록 할 수 있습니다.
94
97
requiredFunc:PropTypes.func.isRequired,
95
98
96
99
// 모든 데이터 타입이 가능한 값
97
100
requiredAny:PropTypes.any.isRequired,
98
101
99
-
// 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
100
-
// 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
102
+
// 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
103
+
// 검사 실패 시에는 에러(Error) 객체를 반환해야 합니다.
101
104
// `oneOfType`안에서는 작동하지 않으므로 `console.warn` 혹은 throw 하지 마세요.
`PropTypes.element`를 이용하여 컴포넌트의 자식들(Children)에 단 하나의 자식(Child)만이 전달될 수 있도록 명시할 수 있습니다.
132
+
`PropTypes.element`를 이용하여 컴포넌트의 자식들(Children)에 단 하나의 자식(Child)만이 전달될 수 있도록 명시할 수 있습니다.
130
133
131
134
```javascript
132
135
importPropTypesfrom'prop-types';
133
136
134
137
classMyComponentextendsReact.Component {
135
138
render() {
136
-
// 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다.
139
+
// 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다.
137
140
constchildren=this.props.children;
138
141
return (
139
142
<div>
@@ -150,7 +153,7 @@ MyComponent.propTypes = {
150
153
151
154
### 초기 Prop 값 {#default-prop-values}
152
155
153
-
`defaultProps` 프로퍼티를 할당함으로써 `props`의 초깃값을 정의할 수 있습니다:
156
+
`defaultProps` 프로퍼티를 할당함으로써 `props`의 초깃값을 정의할 수 있습니다:
154
157
155
158
```javascript
156
159
classGreetingextendsReact.Component {
@@ -161,7 +164,7 @@ class Greeting extends React.Component {
161
164
}
162
165
}
163
166
164
-
// props의 초깃값을 정의합니다.
167
+
// props의 초깃값을 정의합니다.
165
168
Greeting.defaultProps= {
166
169
name:'Stranger'
167
170
};
@@ -173,7 +176,7 @@ ReactDOM.render(
173
176
);
174
177
```
175
178
176
-
만약 당신이 [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/)와 같은 Babel 변환(transform)을 사용하고 있다면, `defaultProps`를 React 컴포넌트 클래스 내의 정적 프로퍼티로 선언 할 수도 있습니다. 이 문법은 아직 완성되지 않았으므로 브라우저에서 작동하기 위해서는 컴파일링 작업이 필요합니다. 더 자세한 정보를 위해서 [class fields proposal](https://github.com/tc39/proposal-class-fields)를 확인해 주시길 바랍니다.
179
+
만약 당신이 [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/)와 같은 Babel 변환(transform)을 사용하고 있다면, `defaultProps`를 React 컴포넌트 클래스 내의 정적 프로퍼티로 선언 할 수도 있습니다. 이 문법은 아직 완성되지 않았으므로 브라우저에서 작동하기 위해서는 컴파일링 작업이 필요합니다. 더 자세한 정보를 위해서 [class fields proposal](https://github.com/tc39/proposal-class-fields)를 확인해 주시길 바랍니다.
177
180
178
181
```javascript
179
182
classGreetingextendsReact.Component {
@@ -189,4 +192,4 @@ class Greeting extends React.Component {
189
192
}
190
193
```
191
194
192
-
`defaultProps`는 `this.props.name`의 값이 부모 컴포넌트에 의해 명시되지 않았을 때 값을 갖도록 할 것입니다. `propTypes`의 타입 확인은 `defaultProps`에도 적용되게 하기 위하여 `defaultProps`가 처리된 뒤에 일어날 것입니다.
195
+
`defaultProps`는 `this.props.name`의 값이 부모 컴포넌트에 의해 명시되지 않았을 때 값을 갖도록 할 것입니다. `propTypes`의 타입 확인은 `defaultProps`에도 적용되게 하기 위하여 `defaultProps`가 처리된 뒤에 일어날 것입니다.
Copy file name to clipboardExpand all lines: content/tutorial/tutorial.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -376,7 +376,7 @@ class Board extends React.Component {
376
376
}
377
377
```
378
378
379
-
나중에 board를 채우면 `this.state.squares` 배열은 아래와 같은 보일 것입니다.
379
+
나중에 board를 채우면 `this.state.squares` 배열은 아래와 같이 보일 것입니다.
380
380
381
381
```javascript
382
382
[
@@ -519,7 +519,7 @@ class Board extends React.Component {
519
519
520
520
이제 이전과 마찬가지로 Square를 클릭하여 사각형을 채울 수 있습니다. 그러나 이제는 state가 각 Square 컴포넌트 대신에 Board 컴포넌트에 저장됩니다. Board의 상태가 변화할 때 Square 컴포넌트는 자동으로 다시 렌더링합니다. Board 컴포넌트의 모든 사각형의 상태를 유지하는 것으로 이후에 승자를 결정하는 것이 가능합니다.
521
521
522
-
Square 컴포넌트가 더 이상 state를 유지하지 않기 때문에 Square 컴포넌트는 Board 컴포넌트에서 값을 받아 클릭됳 때 Board 컴포넌트로 정보를 전달합니다. React 용어로 Square 컴포넌트는 이제 **제어되는 컴포넌트**입니다. Board는 이들을 완전히 제어합니다.
522
+
Square 컴포넌트가 더 이상 state를 유지하지 않기 때문에 Square 컴포넌트는 Board 컴포넌트에서 값을 받아 클릭될 때 Board 컴포넌트로 정보를 전달합니다. React 용어로 Square 컴포넌트는 이제 **제어되는 컴포넌트**입니다. Board는 이들을 완전히 제어합니다.
523
523
524
524
`handleClick`에서는 `.slice()`를 호출하는 것으로 기존 배열을 수정하지 않고 `squares` 배열의 복사본을 생성하여 수정하는 것에 주의해주세요. 왜 `squares` 배열의 사본을 생성하였는지 다음 단락에서 설명하겠습니다.
0 commit comments