diff --git a/docs/tips/12-initial-ajax.ko-KR.md b/docs/tips/12-initial-ajax.ko-KR.md new file mode 100644 index 0000000000..95903dffbc --- /dev/null +++ b/docs/tips/12-initial-ajax.ko-KR.md @@ -0,0 +1,51 @@ +--- +id: initial-ajax-ko-KR +title: AJAX를 통해 초기 데이터 읽어오기 +layout: tips +permalink: initial-ajax-ko-KR.html +prev: dom-event-listeners-ko-KR.html +next: false-in-jsx-ko-KR.html +--- + +`componentDidMount`에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다. + +비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 `this.isMounted()`를 사용합니다. + +이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다. + +```js +var UserGist = React.createClass({ + getInitialState: function() { + return { + username: '', + lastGistUrl: '' + }; + }, + + componentDidMount: function() { + $.get(this.props.source, function(result) { + var lastGist = result[0]; + if (this.isMounted()) { + this.setState({ + username: lastGist.owner.login, + lastGistUrl: lastGist.html_url + }); + } + }.bind(this)); + }, + + render: function() { + return ( +
+ {this.state.username}'s last gist is + here. +
+ ); + } +}); + +React.render( + , + mountNode +); +```