Create 12-initial-ajax.ko-KR.md
Based on 52494f9d723f4b2db12a0bf16a07b243076c15cf
Leonardo YongUk Kim committed
Apr 2, 2015 at 06:24 UTC
792c161cc551f405f802632fddd5dbb63c1d60f8
1 file changed
+51
docs/tips/12-initial-ajax.ko-KR.md
new
+51
@@ -0,0 +1,51 @@
1
+---
2
+id: initial-ajax-ko-KR
3
+title: AJAX를 통해 초기 데이터 읽어오기
4
+layout: tips
5
+permalink: initial-ajax-ko-KR.html
6
+prev: dom-event-listeners-ko-KR.html
7
+next: false-in-jsx-ko-KR.html
8
+---
9
+
10
+`componentDidMount`에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다.
11
+
12
+비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 `this.isMounted()`를 사용합니다.
13
+
14
+이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다.
15
+
16
+```js
17
+var UserGist = React.createClass({
18
+ getInitialState: function() {
19
+ return {
20
+ username: '',
21
+ lastGistUrl: ''
22
+ };
23
+ },
24
+
25
+ componentDidMount: function() {
26
+ $.get(this.props.source, function(result) {
27
+ var lastGist = result[0];
28
+ if (this.isMounted()) {
29
+ this.setState({
30
+ username: lastGist.owner.login,
31
+ lastGistUrl: lastGist.html_url
32
+ });
33
+ }
34
+ }.bind(this));
35
+ },
36
+
37
+ render: function() {
38
+ return (
39
+ <div>
40
+ {this.state.username}'s last gist is
41
+ <a href={this.state.lastGistUrl}>here</a>.
42
+ </div>
43
+ );
44
+ }
45
+});
46
+
47
+React.render(
48
+ <UserGist source="https://api.github.com/users/octocat/gists" />,
49
+ mountNode
50
+);
51
+```