React
AJAX 호출에 응답
수색…
HTTP GET 요청
때로는 컴포넌트가 원격 엔드 포인트 (예 : REST API)에서 일부 데이터를 렌더링해야하는 경우가 있습니다. 표준 실습 은 componentDidMount
메소드에서 이러한 호출을 수행하는 것입니다.
다음은 AJAX 도우미로 superagent 를 사용하는 예입니다.
import React from 'react'
import request from 'superagent'
class App extends React.Component {
constructor () {
super()
this.state = {}
}
componentDidMount () {
request
.get('/search')
.query({ query: 'Manny' })
.query({ range: '1..5' })
.query({ order: 'desc' })
.set('API-Key', 'foobar')
.set('Accept', 'application/json')
.end((err, resp) => {
if (!err) {
this.setState({someData: resp.text})
}
})
},
render() {
return (
<div>{this.state.someData || 'waiting for response...'}</div>
)
}
}
React.render(<App />, document.getElementById('root'))
요청은 request
객체에 대해 적절한 메소드를 호출 한 다음 .end()
를 호출하여 요청을 전송함으로써 시작될 수 있습니다. 헤더 필드를 설정하는 것은 간단합니다. 필드 이름과 값으로 .set()
을 호출하십시오.
.query()
메서드는 GET 메서드와 함께 사용할 때 쿼리 문자열을 형성하는 개체를 허용합니다. 다음은 /search?query=Manny&range=1..5&order=desc
경로를 생성합니다.
POST 요청
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"tj","pet":"tobi"}')
.end(callback)
자세한 내용은 Superagent 문서 를 참조하십시오.
제 3 자 라이브러리가없는 React의 Ajax - 일명 VanillaJS
다음은 IE9 +에서 작동합니다.
import React from 'react'
class App extends React.Component {
constructor () {
super()
this.state = {someData: null}
}
componentDidMount () {
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = () => {
if (request.status >= 200 && request.status < 400) {
// Success!
this.setState({someData: request.responseText})
} else {
// We reached our target server, but it returned an error
// Possibly handle the error by changing your state.
}
};
request.onerror = () => {
// There was a connection error of some sort.
// Possibly handle the error by changing your state.
};
request.send();
},
render() {
return (
<div>{this.state.someData || 'waiting for response...'}</div>
)
}
}
React.render(<App />, document.getElementById('root'))
HTTP GET 요청 및 데이터 루핑
다음의 예는, 리모트 소스로부터 취득한 데이터 세트를 컴퍼넌트에 렌더링하는 방법을 나타내고 있습니다.
대부분의 브라우저에 내장 된 fetch
사용하여 AJAX 요청을합니다. 프로덕션 환경 에서 이전 버전의 브라우저를 지원하기 위해 polyfill fetch
사용하십시오. 요청을하기 위해 다른 라이브러리 (예 : axios , SuperAgent 또는 일반 자바 스크립트)를 사용할 수도 있습니다.
수신 한 데이터를 구성 요소 상태로 설정하므로 render 메소드 내에서 액세스 할 수 있습니다. 거기에서 우리는 map
사용하여 데이터를 반복합니다. React의 렌더링 성능에 중요한 루프 된 요소에 항상 고유 key
속성 (또는 prop)을 추가하는 것을 잊지 마십시오.
import React from 'react';
class Users extends React.Component {
constructor() {
super();
this.state = { users: [] };
}
componentDidMount() {
fetch('/api/users')
.then(response => response.json())
.then(json => this.setState({ users: json.data }));
}
render() {
return (
<div>
<h1>Users</h1>
{
this.state.users.length == 0
? 'Loading users...'
: this.state.users.map(user => (
<figure key={user.id}>
<img src={user.avatar} />
<figcaption>
{user.name}
</figcaption>
</figure>
))
}
</div>
);
}
}
ReactDOM.render(<Users />, document.getElementById('root'));