리액트 // axios / 프로미스 / async

 

 

 

 

 

 

 

https://styled-components.com/docs/basics#installation

styled-components: Basics

 

 

 

 

 

 

<post key={PK} id={1} title=첫 / >

key는 데이터베이스의 기본키(PK)를 넣자

리액트에 알려줘야한다

기본키를 넣으면 중간에 넣거나 할때 계산이 편하다

반복되는 컴포넌트가 있다면 넣자

 

https://velopert.com/3636

누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링 | VELOPERT.LOG

 

 

 

 

액시오스 설치 (통신)

 

 

import React, { Component } from "react";
import Axios from "axios";

class App extends Component {
  state = {
    data: null,
  };

  onClick = () => {
    // 다운받은 json데이터를 자바스크립트 오브젝트로 변환해줌
    Axios.get("https://jsonplaceholder.typicode.com/todos/1") // get방식으로 호출
      // 콜백부분
      .then((resp) => {
        // 프로미스, 밑에꺼 실행하다가 IO가 끝나면 돌아옴
        console.log(resp);
        return;
      });
  };

  render() {
    return (
      <div>
        <h1>클릭하세요</h1>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default App;

 

 

 

 

-----------

static default props 검색해보기

-------------

 

프로미스 방식

import React, { Component } from "react";
import Axios from "axios";

class App extends Component {
  state = {
    data: {
      userId: null,
      id: null,
      title: null,
      completed: null,
    },
  };

  onClick = () => {
    const { data } = this.state;
    // 다운받은 json데이터를 자바스크립트 오브젝트로 변환해줌
    Axios.get("https://jsonplaceholder.typicode.com/todos/1") // get방식으로 호출
      // 콜백부분
      .then((resp) => {
        // 프로미스, 밑에꺼 실행하다가 IO가 끝나면 돌아옴
        console.log(resp);
        this.setState({
          data: { data, ...resp.data },
        });
        return;
      });
  };

  render() {
    const { data } = this.state; // 구조분할할당

    return (
      <div>
        <div>아이디: {data.userId}</div>
        <div>제목: {data.title}</div>
        <hr />
        <h1>클릭하세요</h1>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default App;

 

 

async 방식

import React, { Component } from "react";
import Axios from "axios";

class App extends Component {
  state = {
    data: {
      userId: null,
      id: null,
      title: null,
      completed: null,
    },
  };

  onClick = async () => {
    const { data } = this.state;
    // 다운받은 json데이터를 자바스크립트 오브젝트로 변환해줌
    let resp = Axios.get("https://jsonplaceholder.typicode.com/todos/1"); // get방식으로 호출
    this.setState({
      data: { data, ...resp.data },
    });
  };

  render() {
    const { data } = this.state; // 구조분할할당

    return (
      <div>
        <div>아이디: {data.userId}</div>
        <div>제목: {data.title}</div>
        <hr />
        <h1>클릭하세요</h1>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default App;

 

 

결과

 

--------------