정보실

웹학교

정보실

Reactjs React.js에서 원격 API에서 데이터를 가져 오는 방법

본문

이 포스트에서는 React.js 애플리케이션 내부의 원격 소스에서 데이터를 가져 오는 방법을 보여줍니다. 

자 이제 새로운 React 프로젝트를 만들어 봅시다.


https://arjunphp.com/how-to-fetch-data-from-a-remote-api-in-react-js/ 


React 프로젝트 초기화 


$ npx create-react-app todos
$ cd todos
$ npm start

위의 명령을 성공적으로 실행하면 브라우저의 기본 React 페이지 (http : // localhost : 3000)가 표시됩니다.


이제 간단하게 하기 위해 원격 데이터 가져 오기 작업을 시작하겠습니다.이 기사에서는 브라우저와 함께 제공되는 기본 가져 오기 API를 사용합니다. 비동기 응답을 해결하기 위해 "JavaScript promise"를 사용합니다.


src 디렉토리에 다음 코드를 사용하여 Todo.js라는 파일을 만들려면 Todo라는 새로운 구성 요소를 만들어 보겠습니다.


import React, { Component } from 'react';

class Todo extends Component {

    render() {
        return (
            

Todos List

); } } export default Todo;

우리의 todo 컴포넌트는 임포트 할 준비가 되었습니다. 간단하게 하기 위해 App 컴포넌트로 임포트 하겠습니다. App 컴포넌트 렌더 메소드에서 모든 기본 코드를 제거했으며 최종 버전은 다음과 같습니다.


import React, { Component } from 'react';
import './App.css';
import Todo from './todo/Todo'

class App extends Component {
  render() {
    return (
      
); } } export default App;


http://localhost:3000을 방문하여 이 상태의 출력을 보면 브라우저에 할 일 목록 텍스트가 표시됩니다.


이제 constructor() 메서드를 정의하고 아래와 같이 초기 상태를 할당하겠습니다


constructor(props) {
    super(props)
    this.state = {
       todos: []
   }
}

이제 아래와 같이 렌더링 방법을 업데이트하십시오.


renderTodos() {
        let todoList = []
        this.state.todos.map(todo => {
            return todoList.push(
{todo.title}) }) return todoList; } render() { return (

Todos List

  • {this.renderTodos()}
); }

renderTodos()의 앞의 코드에서 할 일을 반복하고 항목을 todosList 배열로 푸시합니다.


이제 이 componentDidMount() lifecycle 메소드가 가장 적합한 원격 API에서 컨텐츠를 가져 오겠습니다. 정의 해 봅시다 :


componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(response => response.json())
            .then(todos => {
                this.setState({
                    todos: todos.data
                })
            })
            .catch(error => console.log(error))
    }

앞의 코드에서는 페치 API 콜백의 응답으로 setState() 메소드를 호출합니다. 그러면 구성 요소의 상태가 업데이트되고 추가 렌더링이 트리거 되지만 브라우저가 화면을 업데이트하기 전에 발생합니다. 따라서 이 경우 render()이 두 번 호출 되더라도 사용자에게는 중간 상태가 표시되지 않습니다.


이제 http://localhost:3000을 방문하면 브라우저에 할 일 목록이 표시됩니다.


나는 당신 이이 게시물을 좋아 바랍니다, 당신이 직면하는 경우 아래에 당신의 제안과 문제를 의견을 주시기 바랍니다-우리는 당신의 문제를 해결하기 위해 여기에 있습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 8회 ]  작성일19-10-10 23:20

웹학교