Sample Study - Movie List(1)

Nomad Coder - React Fundamentals 2019 따라가기

 

import React from 'react';

function Movie({title}){
  return <h1>Title : {title}</h1>;
}
function App() {
  return(
    <div className="App">
      <h1>Hello</h1>
      <Movie title="Usual suspect"/>
      <Movie title="Inseption"/>
      <Movie title="Star Wars"/>

    </div>
  );
}

export default App;

<Movie ... /> 의 Component에 properties를 만들고 그것을 쓸 수 있다.

* Component는 대문자로 시작해야한다

*VSC 단축키 Ctrl+d : 공통 요소 동시에 선택

 

javascript 의 map 기능

const list = [1,2,3,4];
list.map(current => {
    console.log(current);
    return 0;
 })

'current =>' function(current)

 

current 는 list 배열의 요소(Object)다(명칭은 원하는대로 current가 아니여도 된다)

import React from 'react';

function Movie({title, img}){
  return <div>
  <h1>Title : {title}</h1>
  <h1>Poster : <img src={img}/></h1>
  </div>
  ;
}

const movieList = [{
  title : "Usual Suspects",
  image : "https://images-na.ssl-images-amazon.com/images/I/517NYZ62HAL._SY445_.jpg"
},
{
  title : "Inception",
  image : "https://is2-ssl.mzstatic.com/image/thumb/Video113/v4/83/84/eb/8384eb90-6fa0-1a28-a838-b23437efd244/pr_source.lsr/268x0w.jpg"
},
{
  title : "StarWars",
  image : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTAgH6BUn-LiX_MFjTYaR3oFOnD2WoWKyRtVHPLqMCUhbI95QFE"
},
];

function App() {
  return(
    <div className="App">
      <h1>Hello</h1>
        {movieList.map(movie=>(
        <Movie title={movie.title} img={movie.image}/>))}
    </div>
  );
}

export default App;

movieList라는 array에 원하는 data를 넣고 map을 사용해 각 요소를 component로 넘길 수 있다.(매개변수)