ReactJS 20.09.14

node.js / npm / npx : npm install npx -g / git

<설치 확인 방법>

node -v

npm -v

npx -v

git --version

---

#1.0 Creating first React App

1. npx create-react-app ____ 실행

2. vsc folder open

3. Terminal - npm start

4. create-react-app 생성 Success!

---

#1.1 Creating a Github Repository(VSC로 Github에 파일 넣는법)

1. vsc terminal에서 gin init하면 기존 저장소를 다시 초기화하라는 메세지가 뜬다.

2. Github repository 생성

3. 생성된 repository URL copy

4. vsc terminal : git remote add origin URL

5. git add.
   git commit -m "URL"

6. git push origin master 실행하면 Github에 local에 있는 파일이 들어간다.

---

React는 어떻게 움직일까?

React는 component를 사용해서 HTML처럼 작성하려는 경우에 필요하다. JS와 함께 만들고 그것들을 HTML로 밀어 넣는다. React는 element를 넣는 역할을 담당한다. 모든 react application을 div 사이에 넣자.

React는 소스코드에 처음부터 HTML을 넣지 않고 HTML에서 HTML을 추가하거나 제거하는 법을 안다. 빈 HTML을 로드한 다음 react가 component에 작성해뒀던 것들을 HTML을 밀어넣게 된다. react는 component와 함께 동작한다. 보이지 않고 존재하지 않는다....

재사용 가능한 component를 만들 수 있고 component를 계속 반복해서 사용할 수 있다.

<React 작업 시 주의사항>
localhost를 계속 유지하고 refresh할 수 있고 그걸 보려면 Npm start를 실행하고 console을 종료하지 않아야한다.

즉. 항상 NPM start를 실행하고 그대로 둘 필요가 있다!!

Component : HTML을 반환하는 함수

• component 만드는 방법

import React from 'react'; 적지 않으면 react는 jsx에 있는 component를 사용하는 것을 이해하지 못한다.

react application은 한 번에 하나의 component만 rendering할 수 있다.

---

jsx : JS와 HTML의 조합(React에 유일)

component에 정보를 보낼 수 있다.

  <Food fav = "kimchi" />

food component에 fav라는 이름의 property를 kimchi라는 value로 준 것.

import React from 'react';

function Food({fav}) { // 중괄호{}로 적용가능 
  
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
        <h1>Hello!</h1> 
      <Food fav = "kimchi" />
    </div>
  );
}

export default App;

fav = "kimchi" -> component에 넣게 되는 것들을 props라고 하자.
props는 argument로 간다.

---

Dynamic Component Generation

• Map : array의 각 item에서 function을 실행하는 array를 가지는 JS function. 그 function의 result를 갖는 array를 준다.
  function을 취해서 그 function을 array의 각 item에 적용한다.

import React from 'react';

function Food({name,picture}) {
  
  return <div>
    <h2>I like {name}</h2>
    <img src = {picture} />
  </div>
}

const foodIlike = [
  {
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  },
  {
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
  }
];

function App() {
  return (
    <div>
        
      {foodIlike.map(dish => <Food name ={dish.name} picture={dish.image}/>)}

    </div>
  );
}

export default App;

---

• 위 코드를 함수를 사용해서 작성한 코드

function renderFood(dish){
  return <Food name ={dish.name} picture={dish.image}/>
}
function App() {
  return (
    <div>
      {foodIlike.map(renderFood)}
    </div>
  );

---

Protection with PropTypes

prop-types : 내가 전달받은 props가 내가 원하는 props인지 확인하는 장치

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



const foodIlike = [
  {
    id : 1,
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
      rating : 4
    },
  {
    id : 2,
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
      rating : 5
    },
  {
    id : 3,
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb",
      rating : 5.4
    },
  {
    id : 4,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
      rating : 5.5
    },
  {
    id : 5,
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
    rating : 4.7
    }
];

function Food({name,picture,rating}) {
  
  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() {
  return (
    <div>
        
      {foodIlike.map(dish => <Food key={dish.id} name ={dish.name} picture={dish.image} rating={dish.rating}/>)}

    </div>
  );
}

export default App;