axios 설치 명령어(터미널에서)

1
npm install axios
  

[App.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react';
import axios from 'axios';
import Movie from './Movie';
class App extends React.Component{    
  state={              
   isLoading: true,
   movies: []
  };
 
  getMovies = async () =>{      // async는 비동기를 말하며 await는 axios함수가 끝날떄 까지 기달리라는 뜻을 가진다.
    const {data : {data : {movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');
    // movies.data.data.movies로 써도 되지만 es6에서는 {data : {data : {movies}}}같은 방법으로도 사용 가능하다.
    this.setState({ movies, isLoading:false });
  }
  componentDidMount(){
   this.getMovies();
  }
 
  render(){
    const {isLoading, movies} = this.state;
    return (
      <div>{isLoading ? "Loading..." : movies.map(movie => (
        <Movie
          key={movie.id}
          id={movie.id} 
          title={movie.title} 
          year={movie.year} 
          summary={movie.summary} 
          poster={movie.poster}
        />
      ))}
      </div>
      
    );    
  } 
}
 
export default App;
 
  

[Movie.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import PropType from 'prop-types';
 
function Movie({id, title, year, summary, poster}){
    return <h4>{title}</h4>
}
 
Movie.PropType = {
    id: PropType.number.isRequired,
    title: PropType.string.isRequired,
    year: PropType.number.isRequired,
    summary: PropType.string.isRequired,
    poster: PropType.string.isRequired
}
 
export default Movie;
  

'웹 프로그래밍 > ReactJS' 카테고리의 다른 글

state 사용법  (0) 2019.09.09
기초적인 prop 사용법  (0) 2019.09.09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import PropTypes from 'prop-types';
 
class App extends React.Component{    // App 컴포넌트는 return함수를 가지고 있지만 React 컴포넌트로 확장했기 때문에 render 함수를 사용해야 한다. 그 이유는 React 컴포넌트는 return함수를 가지고 있지 않기 때문이다.
  state={               // 변하는 데이터를 생성하고자 할때는 state 안에 넣어야 한다.
    count: 0            // state를 render안에 넣고자 한다면 {this.state.count}와 같은 형식으로 넣어야 한다.
  };
  add = () =>{
    console.log("add");
    this.setState({count: this.state.count + 1});           // 이 방법은 추천하지 않는다.
  };
  minus = () =>{
    console.log("minus");
    this.setState(current => ({count: current.count - 1}));   // 이 방법을 추천한다.
  };
  render(){
    const {count} = this.state;
 
    return (
      <div>
        <h1>Number is {count}</h1>
        <button onClick={this.add}>더하기</button>           
        <button onClick={this.minus}>빼기</button>
      </div>
    );    // 바닐라JS에서는 기본적으로 button에 addEventListener를 해야하지만 react에서는 기본적으로 onClick함수가 내장되어있다.
  } 
}
 
export default App;
 
  

'웹 프로그래밍 > ReactJS' 카테고리의 다른 글

axios 사용하기  (0) 2019.09.09
기초적인 prop 사용법  (0) 2019.09.09

58번째에 사용된 map()함수는 배열변수에서만 사용할 수 있고 기본적으로 forEach 기능을 가지고 있다.

안에 들어갈 파라미터로는 함수가 들어간다. 

예를 들면

iLikeFood.map(function(item){

 <Food />

});

위와 같은 기본적인 형식이면 아래의 코드로와 기능은 같다.

iLikeFood.map( item => <Food />); 

 

item은 오브젝트이며 iLikeFood 배열에 존재하는 각각의 아이템들에 해당한다.

 

map함수의 기능으로는 배열안에 들어있는 오브젝트의 값을  Food라는 함수의 결과 값으로 바꾸는 기능 가지고 있다.

예를들어 iLikeFood 배열이 [1,2,3,4,5]라고 하자. 또 Food라는 함수의 return 값은 0이라고 한다면

 

iLikeFood.map( item => <Food />); 의 결과값으로 console.log(iLikeFood)를 찍어본다면 [0,0,0,0,0]이 나올것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react';
import PropTypes from 'prop-types';
 
const iLikeFood = [
  {
    id:1,
    name: "김밥",
    image: "../images/1.jpg",
    rating: 4.5
  },
  {
    id:2,
    name: "탕수육",
    image: "../images/2.jpg",
    rating: 4.0
  },
  {
    id:3,
    name: "라조기",
    image: "../images/3.jpg",
    rating: 3.8
  },
  {
    id:4,
    name: "동파육",
    image: "../images/4.jpg",
    rating: 4.3
  },
  {
    id:5,
    name: "족발",
    image: "../images/5.jpg",
    rating: 5.0
  },
]
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
};
 
function Food({name, picture, rating}){
  //console.log(props);
  //return (<h5>I have a {props.dessert}</h5>)
  return (
    <div>
      <h1>I like {name}</h1>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  )
}
 
function App() {
  return (
    <div className="App">
      Hello!!
      {iLikeFood.map(item => <Food key={item.id} name={item.name} picture={item.image} rating={item.rating} />)}
    </div>
  );
}
 
export default App;
 
  

 

'웹 프로그래밍 > ReactJS' 카테고리의 다른 글

axios 사용하기  (0) 2019.09.09
state 사용법  (0) 2019.09.09

+ Recent posts

티스토리툴바