🍿오늘 공부한 것 (정리 x)🍿

정리하면서 글 작성시 시간이 너무 걸릴거 같아서 그냥 코드 랑 출력결과를 위주로 올립니다.
- 공부의 목적은 글 작성이 아닌 이해가 우선!

 

 

1. 어떻게 object list(객체 리스트)를 가져오는지! 오직 JS 의 object(객체) 들만

2. map 이 하는것은 rendering 하지만 array 로부터 우리에게 array를 준다.

3. map 은 array 의 각 item에서 function을 실행하는 array를 가지는 javaScript fuction 이다.

그 function의 result 를 갖는 array를 너에게 줘.'

 

 

map 은 각각 item 별로 function 을 호출함.

item 이름: dish <- 라고  정해줌

map 은 뭐가 돌아오든 array로 돌려주기 때문

 

import React from 'react';  // 리엑트를 사용하려면 필수 구문.
import PropTypes from "prop-types";


const foodILike = [
  {
    id:1,
    name:"kimchi",
    image:
    "http://m.8go.kr/web/product/big/202102/a7aa14360fdb47b585ae860555369f30.jpg",
    rating:3.0
  },
  {
    id:2,
    name:"samgyeopsal",
    image:
    " http://image.newsis.com/2020/06/17/NISI20200617_0000546793_web.jpg",
    rating:5.0
  },
  {
    id:3,
    name:" bibimbap",
    image:
    "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Dolsot-bibimbap.jpg/220px-Dolsot-bibimbap.jpg",
    rating:4.0
  },
  {
    id:4,
    name:"jukumi",
    image:
    " https://recipe1.ezmember.co.kr/cache/recipe/2019/03/05/52d2be99c015378a75c9db81362422c71.jpg",
    rating:1.0
  }
];
  //함수 Food component
function Food({name, picture, rating}){   //props.fav 또는 {}내부에 fav를 쓰는것은 같은거임.
  return( 
    <div>
      <h2>i like {name}</h2>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  );
}

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating : PropTypes.number.isRequired
}

function App() {                    //이 애플래케이션에 food 컴포넌트 정보를 보내고, 그런다음에 food 컴포넌트에서 그정보를 어떻게 사용하는지!
  return (
     <div> 
        {foodILike.map(dish => (
          <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} />//props
          ))}
     </div> 
    );
}

export default App;
//food component 에 정보를 보내는 방법.  -> food component에 fav라는 이름의 propery를 kimchi라는 value로 준거임.

 

 

 

 

import React from 'react';  // 리엑트를 사용하려면 필수 구문.
import PropTypes from "prop-types";

class App extends React.Component {
  state={
    count: 0  
  }
  add= () =>{
    this.setState(current =>({count: current.count +1}))
  };
  minus= () =>{
    this.setState(current =>({count: current.count -1}))
  };
  render(){
    return(
    <div>
      <h1>The number is : {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>Minus</button>
    </div>
    );
  }
} 
                             //class App 은 react component . 이단계는 필수
export default App;

 

 

app.js

import React from 'react';  // 리엑트를 사용하려면 필수 구문.
import axios from 'axios';
import Movie from "./movies";

class App extends React.Component {
  state ={
    isLoading: true,
    movies:[ ]
  };
  getMovies = async() => {
    const {data: {data:{movies}}} = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json?sort_by=rating")
   this.setState({movies, isLoading:false})
  }

  componentDidMount(){
    this.getMovies();
  }

  render(){
    const { isLoading, movies } = this.state;
    return (
     
      <section class="container">
        {isLoading ? (
          <div class="loader">
            <span class="loader__text">Loading...</span>
          </div>
      ) : (
      <div class="movies">
        {movies.map(movie => (
            <Movie
              key={movie.id}
              id={movie.id}
              year={movie.year}
              title={movie.title} 
              summary={movie.summary} 
              poster={movie.medium_cover_image}
              />
            ))}
      </div>
          
        )}
      </section>
    );
  }
}

export default App;

movies.js

 

import React from "react";
import PropTypes from "prop-types";


function Movie({id,year,title,summary,poster}){
  return (
  <div class="movies_movie">
    <h3 class="movie_title">{title}</h3>
    <h5 class="movie_year">{year}</h5>
    <p class="movie_summary">{summary}</p>
    </div>
    );
}

Movie.propTypes= {
  id: PropTypes.number.isRequired,
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired
}

export default Movie;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';



ReactDOM.render(<App/>, document.getElementById('root'));